Node Manipulation in the DOM

DOM

I’ve been screwing around with DOM Manipulation for a few years now, doing stuff sporadically here and there. With my development of MasterWish and my recent interest in Script.aculo.us, I often find myself forgetting the various objects, functions and attributes relating to nodes. Hence the reason for this post. I want a quick and easy way to find the information…So, here’s a quick run-down of node structure:

Assuming we have the following simple structure:

<div id=”outer”>
    <div id=”inner_1″>
        Bork!
    </div>
    <div id=”inner_2″>
        OMG Lazerz Pew pew!1!!!1!
    </div>
    <div id=”inner_3″>
        <div id=”super_inner”>
            I like butter
        </div>
    </div>
</div>

We know the following (I completely understand the relationships between nodes…but I’m filling this out for completeness):

  • Node “outer”: is the parent of nodes inner_1, inner_2, and inner_3
  • Nodes inner_1, inner_2, and inner_3: are the child nodes of outer
  • Node inner_1: is the first child node of outer
  • Node inner_3: is the last child node of outer
  • Node inner_1: is the previous sibling node of inner_2
  • Node inner_3: is the next sibling node of inner_2
  • Node super_inner: is not a child node of outer, but is a child node of inner_3

Here are the node related functions available:

property description
nodeName name of the node
nodeValue value of node (only applicable to text nodes)
nodeType type of node – see below
parentNode parent, if one exists
childNodes list (array) of child nodes
firstChild first child
lastChild last child
previousSibling previous sibling
nextSibling next sibling
attributes list of attributes of an element
ownerDocument document containing the element

Here are the node types:

number description
1 an HTML element
2 an element attribute
3 text
8 an HTML comment
9 a document
10 a document type definition