Navigating Documents : DOM Content : Development : JavaScript DHTML examples (example source code) Organized by topic

JavaScript DHTML
C++
PHP
JavaScript DHTML Home »  Development   » [  DOM Content  ]   
 



Navigating Documents

Please note that some example is only working under IE or Firefox.


/*
JavaScript Unleashed, Third Edition
by Richard Wagner and R. Allen Wyke 

ISBN: 067231763X
Publisher Sams CopyRight 2000

*/

/*
                           Navigating a Document


+--------------------+-----------------------------------------------------
Navigate to                                     Expression
+--------------------+-----------------------------------------------------
The first child                                 bodyNode.firstChild or 
                                                bodyNode.childNodes[0]
+--------------------+-----------------------------------------------------
The second child                                bodyNode.childNodes[1]
+--------------------+-----------------------------------------------------
The fourth or last child                        bodyNode.childNodes[4] or 
                                                bodyNode.lastChild
+--------------------+-----------------------------------------------------
Root's second child (the text node) from Node 1 Node1.nextSibling
+--------------------+-----------------------------------------------------
Root's third child from Node 1                  Node1.nextSibling.nextSibling
+--------------------+-----------------------------------------------------
Root's last child                               Node1.nextSibling.nextSibling. nextSibling
+--------------------+-----------------------------------------------------
Children of the fourth child                    Node1.nextSibling.nextSibling. nextSibling.childNodes[0]
+--------------------+-----------------------------------------------------
The second <P> from the third <p>               Node3.previousSibling.previous Sibling.previousSibling.childNodes[0]
+--------------------+-----------------------------------------------------
The grandchild of the <BODY> tag.               bodyNode.firstChild.firstChild
+--------------------+-----------------------------------------------------
<BODY> root tag from a <P> tag                  Node1.parentNode
+--------------------+-----------------------------------------------------
The grandchild of the <BODY> and                bodyNode.firstChild.firstChild. parentNode.parentNode 
back to the <body>   
+--------------------+-----------------------------------------------------
*/


<HTML>
<HEAD>
<TITLE> DOM document tree </TITLE>
</HEAD>
<BODY ID="bodyNode"><P ID = "Node1">A first paragraph</P>
The main document
<P ID = "Node2">   </P>
<P ID = "Node3"></P>
<P ID = "Node4"></P>
</BODY>
</HTML>
           
       
Related examples in the same category
1.  Define a NodeFilter function to accept only 'img' elements
2.  CSS style sheet a 'window' visual effect
3.  Check DOM Node object whether represents an HTML tag
4.  If a DOM Node object is a Text object
5.  recursively looks at node n and its descendants: replacing with their uppercase equivalents
6.  Creating a Table: Using the insertBefore Method with DOM
7.  A DOM Core Document Analyzer
8.  Adding/Replacing DOM Content
























Home| Contact Us
Copyright 2003 - 04 Demo Source and Support. All rights reserved.
All other trademarks are property of their respective owners.