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>
bodyelement is considered a child of thehtmlelement.htmlelement is considered the parent of thebodyelement.headelement is considered a sibling of thebodyelement.
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>
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>