Accessing a DOM node

Question

Using just the DOM API, what are all of the different ways I can access a node?

For example, I know I can call document.getElementById("header");. I'd like a complete list of ways to get access to this node.

Answer 1

"access" can come in two forms. Properties and Methods.

In this list m is a node object (HTML element). Some properties:

• m.innerHTML - the text
• m.nodeName -the name
• m.nodeValue - the value
• m.parentNode - the parent node
• m.childNodes - the child nodes
• m.attributes - the attributes nodes

Some methods:

• m.getElementById(id) - the element with id
• m.getElementsByTagName(name) - get all elements by tag name
• m.appendChild(node) - insert child node to m
• m.removeChild(node) - remove child node from m

Some "special" ones:

• document.documentElement - root node of document
• document.body - direct access to body element tag

Note: there are other proporties such as .length etc for specific use when applicable.

EDIT: A reference to the specification can be found here: http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html

EDIT2: A reference to the level 1 HTML specification here: http://www.w3.org/TR/REC-DOM-Level-1/level-one-html.html

EDIT3: Complete ECMA script binding: http://www.w3.org/TR/REC-DOM-Level-1/ecma-script-language-binding.html

Answer 2

The following list contains collections, properties and methods that can be used to access a node. Some of them are element specific, some of them are members of each element, some of them are only available through the document object.

Collections: all, anchors, applets, areas, cells, childNodes, children, elements, embeds, forms, frames, images, links, options, rows, scripts, tBodies

Properties: body, caption, document, documentElement, firstChild, firstElementChild, frameElement, lastChild, lastElementSibling, nextElementSibling, nextSibling, offsetParent, ownerDocument, parentElement, parentNode, previousElementSibling, previousSibling, tFoot, tHead

Methods: getElementById, getElementsByClassName, getElementsByName, getElementsByTagName, getElementsByTagNameNS

You can find further details and examples here: Element handling objects, properties and methods in JavaScript