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”

  1. pingback pingback:
    BorkWeb » Blog Archive » Ajax; Templating; and the Separation of Layout and Logic

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

    Reply to this comment.
    1
  2. AvatarBen Crinion

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

    Reply to this comment.
    2
  3. AvatarSome Random Dude

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

    Reply to this comment.
    3
  4. AvatarJason

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

    Reply to this comment.
    4

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Comment Preview:

 (12875) - javascript getchild (90) - javascript get parent (31) - getChild javascript (26) - javascript div children (22) - dom manipulation (15) - dom get parent (12) - dom getparent (10) - javascript previous child (9) - javascript dom getchildren (6) - inner (6) - javascript DOM getChild (6) - get parent javascript (6) - dom (5) - dom sibling (4) - getchildren javascript (4) - javascript dom get sibling (3) - dom sibling javascript (3) - javascript div childNodes (3) - div children javascript (3) - javascript dom sibling (3) - js getchild (3) - javascript dom manipulation (3) - javascript get div children (3) - javascript element getchild (2) - dom manipulation javascript (2) - javascript siblings (2) - javascript find child nodes by id (2) - jscript getchild (2) - javascript html getchild (2) - javascript div parent (2) - javascript getParent firstchild nextsibling (1) - count child of node in javascript (1) - javascript find last node (1) - getting previous child node using javascript (1) - div javascript node child count (1) - how to find child javascript (1) - dom get previous child (1) - how to find child node names in javascript (1) - javascript to trace child nodes (1) - find a child element in javascript (1) - javascript getchild for (1) - dom get first link node (1) - dom javascript text node (1) - javascript count children dom (1) - javascript count children (1) - javascript sibling count (1) - javascript count child nodes (1) - javascript count child element (1) - html object get child divs (1) - dom get siblings (1) - javascript get number of children (1) - get div children javascript} (1) - javascript dom child elements div id (1) - div child nodes javascript (1) - get id of child node DOm (1) - get siblings DOM (1) - javascript getting node id (1) - javascript get child by class (1) - get javascript dom parent (1) - javascript div has children (1) - sibling childNodes DOM (1) - javascript getelementbyid getchildren (1) - javascript get child index (1) - find parentElement iterate tag javascript (1) - getChild javascript function (1) - javascript get children ie6 dom (1) - get parent from child javascript dom (1) - javascript get id child (1) - javascript how to get parent (1) - javascript:id of parent element (1) - javascript get parent dom object (1) - get parent element in dom javascript (1) - get previous siblingjavascript (1) - getting div child elements (1) - javascript count elements (1) - javascript element manipulation attribute (1) - alfresco javascript find node id (1) - js div children (1) - javascript retrieve child (1) - DOM getParent Tutorials (1) - JavaScript get children by id or class (1) - javascript find child element by name (1) - node manipulation using javascript (1) - get parent,javascript (1) - javascript div child is input (1) - javascript node manipulation split (1) - finding children of xml element javascript (1) - javascript (1) - javascript onmouseover getChild (1) - javascript get child id of parent id element (1) - getting parent object in javascript (1) - getchild js (1) - javascript count div children (1) - javascript Li element find children (1) - javascript get.parent (1) - javascript element find a child (1) - javascript nodes sibling child firstchild (1) - javascript dom getting sibling node (1) - javascript dom sibling nodes (1) - javascript childnode div (1) - html dom getchild (1) - javascript dom node name (1) - javascript dom get siblings (1) - DOM javascript getchild (1) - javascript find sibling node (1) - html javascript getChild (1) - javascript div get children (1) - javascript get child node name (1) - javascript sibling child (1) - getChild in Javascript (1) - javascript getchild div (1) - dom find child node by id (1) - dom getParent element (1) - find child javascript (1) - javascript div.parent (1) - get child by id javascript (1) - javascript sibling node (1) - javascript get child node (1) - javascript DOM children (1) - javascript get sibling (1) - javascript getting parent element (1) - javascript find child (1) - javascript dom get parent (1) - html dom sibling (1) - find node DOM (1) - get child id javascript (1) - javascript get child id (1) - get child node javascript (1) - javascript get dom parent (1) - javascript get previous child (1) - javascript get sibling element (1) - get child node by name (1) - js node manipulation (1) - div get parent javascript (1) - dom example getChild (1) - count child divs DOM (1) - javascript div getChild (1) - javascript getnode by ID (1) - javascript dom count child elements (1) - child node count in java script (1) - how to find a child object in javascript (1) - javascript dom children count (1) - javascript div get child count (1) - childNode and javascript and position (1) - if exist node java DOM (1) - get child dom html (1) - getting sibling nodes in javascript (1) - dom javascript count chield (1) - javascript childnodes count first child (1) -