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 |
Discuss This Article
|
|
4 Responses to “Node Manipulation in the DOM”
-
pingback:
Posted: Mar 10th, 2006 at 10:04 amBorkWeb » Blog Archive » Ajax; Templating; and the Separation of Layout and Logic 1 -
Ben Crinion
Posted: Sep 8th, 2006 at 4:50 amReply to this comment.Perhaps you could make this site harder to read by making the background colour the same colour as the text.
2 -
Some Random Dude
Posted: Dec 10th, 2006 at 1:15 pmReply to this comment.Ben try to avoid negative thoughts and comments, if you apply it to your personal live you will be happier.
3 -
Jason
Posted: Nov 6th, 2007 at 2:16 pmReply to this comment.I found this reference handy when I was trying to look some of these method names up. Thanks for putting it where google could find it for me. :-)
4
Leave a Reply
Comment Preview:
[...] I have often mentioned my process of expanding my proficiency of Ajax. Through my journey I have made a number of wrong turns and hit my share of stumbling blocks. All of that has been a learning experience and I’m learning still. I began fiddling with XMLHttpRequest as many do - blissfully ignorant of the many frameworks that exist to make Ajax super easy. My code was bloated with some neat…’features’ (pronounced: bugs). [...]