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



Comments

5 responses to “Node Manipulation in the DOM”

  1. […] 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). […]

  2. Ben Crinion Avatar
    Ben Crinion

    Perhaps you could make this site harder to read by making the background colour the same colour as the text.

  3. Some Random Dude Avatar
    Some Random Dude

    Ben try to avoid negative thoughts and comments, if you apply it to your personal live you will be happier.

  4. 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. :-)

  5. Well this looks very nice post who want to start with DOM. Thank you for nice post.

    events are also bit important while working with DOM. I was working on events and DOM last time and I came to know a very strange thing about events.

    My task : create an input type=’text’ element using createElement function and setting an function call on onblur event of this newly created input element.

    I created the element but was not able to write a generic script ( cross browser ) to set the onblur event on it.

    element.attachEvent(‘onblur’,functionName) works in IE but not in mozilla firefox 3.0.10

    there is another function element.addEventListener(‘blur’,functionName) this works in mozilla firefox 3.0.10 but not in IE.

    I found a crazy solution: I just used both function with browser detection code.

    if(browser=="Microsoft Internet Explorer")
    {
    element.attachEvent('onblur',function () {
    g(element);
    });
    }
    else
    {
    element.addEventListener('blur',function () {
    g(element);
    },false);
    }

    This works fine , but I want to know that is there any function which works in all browsers?

    Thanks you
    Roy
    Contact me