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 |
One of my must have extensions for firefox has a new version out! Firebug, if you don’t already know, is an Ajax/layout/javascript troubleshooter and is extremely well developed. In version 0.4, Firebug steps beyond the bounds of being a troubleshooter and can now be considered a full fledged debugger. Its new features include: