Node Relationships

Description

All nodes in a document have relationships to other nodes.

For the following html document.


<html>
    <head>
        <title>Sample Page</title>
    </head>
    <body>

        <p>Hello World!</p>
    </body>
</html>

  • body element is considered a child of the html element.
  • html element is considered the parent of the body element.
  • head element is considered a sibling of the body element.

childNodes

Each node has a childNodes property containing a NodeList.

A NodeList is an array-like object used to store an ordered list of nodes that are accessible by position.

DOM structure changes will be reflected in NodeList objects automatically.

The following example shows how nodes stored in a NodeList may be accessed via bracket notation or by using the item() method:


var firstChild = someNode.childNodes[0];
var secondChild = someNode.childNodes.item(1);
var count = someNode.childNodes.length;

The length property indicates the number of nodes in the NodeList at that time.


<!DOCTYPE HTML> 
<html> 
    <body> 
        <pre id="results"><code><code></pre> 
        <script> 
            var resultsElement = document.getElementById("results"); 
            var firstChild = resultsElement.childNodes[0];  
            document.writeln(firstChild.nodeName); 
            <!--from w  w  w. j ava2  s  . c om-->
            var secondChild = resultsElement.childNodes.item(1); 
            document.writeln(secondChild.nodeName);             
        </script> 
    </body> 
</html>

Click to view the demo

Relationships

Each node has a parentNode property pointing to its parent in the document tree.

All nodes contained within a childNodes list have the same parent.

Each node within a childNodes list is considered to be a sibling of the other nodes.

We can navigate from one node in the list to another by using the previousSibling and nextSibling properties.

The first node in the list has null for the value of its previousSibling property, and the last node in the list has null for the value of its nextSibling property.

If there's only one child node, both nextSibling and previousSibling will be null.

The firstChild and lastChild properties point to the first and last node in the childNodes list, respectively.

The value of someNode.firstChild is always equal to someNode.childNodes[0], and the value of someNode.lastChild is always equal to someNode.childNodes[someNode.childNodes.length-1].

If there is only one child node, firstChild and lastChild point to the same node;

If there are no children, then firstChild and lastChild are both null.

hasChildNodes() returns true if the node has one or more child nodes.

The ownerDocument property is a pointer to the document node that represents the entire document.

Example


<!DOCTYPE html>
<html>
    <body>
        <div id="div1">
            <p>Hello <b>World!</b></p>
            <ul>
                <li>List item 1</li>
                <li>List item 2</li>
                <li>List item 3</li>
            </ul>
        </div>
        <p>Hello <b>World!</b></p>
        <script type="text/javascript">
               var div = document.getElementById("div1");
               var node = div.parentNode;
               document.writeln(node);
               <!--   w  w w .j a va 2s  . co m-->
               var preNode = div.previousSibling;
               document.writeln(preNode);

               if (preNode.nextSibling === null){
                   document.writeln("Last node in the parent's childNodes list."); 
               } else if (preNode.previousSibling === null){
                   document.writeln("First node in the parent's childNodes list."); 
               } 
               var firstNode = div.firstChild;
               var sameNode = div.childNodes[0];
               
               if (firstNode === sameNode){
                   document.writeln("same."); 
               } else {
                   document.writeln("not"); 
               } 
               
               var lastNode = div.lastChild;
               sameNode = div.childNodes[div.childNodes.length-1];
               
              
               if (lastNode === sameNode){
                   document.writeln("same."); 
               } else {
                   document.writeln("not"); 
               }
               document.writeln(div.hasChildNodes()); 
        </script>
        
    </body>
</html>

Click to view the demo





















Home »
  Javascript »
    Javascript Introduction »




Script Element
Syntax
Data Type
Operator
Statement
Array
Primitive Wrapper Types
Function
Object-Oriented
Date
DOM
JSON
Regular Expressions