Node of the tree of an HTML document

The Node interface is defined in the DOM 2 specification, it allows access to the structure of an HTML document seen as a tree, and allows to modify that structure.

Purpose of the interface

Node represents a node in the tree of tags and texts that make up an HTML page. You can create a Node, add sub-elements, and integrate them into another Node of the tree. You can also access any node of the tree, through the methods of document getElementById () which returns a Node, or getElementsByTagName () which returns a list of Nodes.

Its methods are inherited by more specific elements of the page that add their own attributes and methods.

Attributes of Node

The attributes of Node are other Nodes, and properties, as the name of the tag.

Properties

Atrributes that are other Nodes

These attributes are read-only, but they may change through the use of methods to add or delete nodes. They value is null if the corresponding node does not exist.

Example

A Node is retrieved by its ID and the method getElementById of document.
var n = document.getElementById("mynode");
var x = n.nextSibling;          // returns the successor of the node mynode. 

Methods of Node

They allow to create a document or modify it.

Examples

Creation and use of a Node in JavaScript

A Node may be created with the createElement of Document or we can create an element derived from Node, and then use inherited methods of Node on this element.

<div id="mytag">Hello!</div>

<script>
    var node = document.getElementById("mytag");
    var value = x.firstChild;
    document.write(x.tagName);
    document.write("<br>");
    document.write(value.data);
</script>

A Node object is created from a tag in the page. In this case, it is a <div> tag which contains another Node in Text format, the string Hello!
We read the name of the node with the nodeName property, and we get the content with the attribute firstChild, then the interface Text can read the contentl with the property data (from the interface characterData derived from Text).

Demonstration of methods of the DOM interface Node.

Hello!

Creating a clone

The purpose of this example is to see what happens about attributes of a Node when a copy is made with the method cloneNode.

We must first take care that children of a node are not necessarily the tags displayed.

A table is created with two rows and two columns, and whose ID is mytag.

var x = document.getElementById("mytag");
document.write(x.tagName);	
var row1 = x.firstChild;
document.write("child is " + row1);

We see that firstChild is a Text and not <tr> as seen in the source. Because the spaces between tags are counted as part of the tree.

Reference is made to the source code of the example for the details of all the commands.

Demonstration showing how the clone of a Node has its attributes assigned to.

row 1 column 1 row 1 column 2
row 2 column 1 row 2 column 2

Source code:

<table id="mytag" width="75%" border="1">
<tr>
<td>row 1 column 1</td><td>row 1 column 2</td>
</tr>
<tr>
<td id="three">row 2 column 1</td><td>row 2 column 2</td>
</tr>
</table>
var x = document.getElementById("mytag");
document.write(x.tagName);

var row1 = x.firstChild;
document.write"child is " + row1);

var list = document.getElementsByTagName("td");
document.write("number of =" + list.length);

var r1c2 = list.item(2);
document.write("Child of r1c2: " + r1c2.firstChild);
document.write("Its id: ", r1c2.id);	

var value = r1c2.firstChild.data;
document.write("Its value : ", value);

var node = r1c2.cloneNode(false);
document.write("Child of its clone: " + node.firtChild);
document.write("Its id: ", node.id);

Once the Node is copied, it keeps the ID of the original, but not the attributes related to the tree, firsChild is therefore null.

See also

References

© 2008-2012 Xul.fr