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

    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