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 |