Accessing a DOM node

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.

  • How to get text inside span, and use it into other script
  • ParentNode and previousSibling in JavaScript
  • What's wrong with my event handler?
  • DOM HTMLElement className property when the element has no class name set
  • Find an element that has an attribute matching a pattern
  • Can I rely on the implicit creation of the `tbody` tag?
  • Form.Submit does not go through when using VBA
  • Detecting user tampering with DOM
  • Unbind events from elements that are removed from the DOM
  • How can I trace an event using Firebug?
  • How to clone an element and change its DOM type
  • What is the difference between open and closed shadow DOM encapsulation mode?
  • 2 Solutions collect form web for “Accessing a DOM node”

    “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:

    EDIT2: A reference to the level 1 HTML specification here:

    EDIT3: Complete ECMA script binding:

    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.

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

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

    getElementById, getElementsByClassName, getElementsByName, getElementsByTagName, getElementsByTagNameNS

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