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

DOMString nodeName
The name of the tag as <table>, <pre>, etc.

DOMString nodeType
Category of the node: comment, text, etc.

DOMString nodeValue
The value of the node where it makes sense. All nodes do not have a value, it may be null.

NamedNodeMap attributes
List of attributes of the node. Read-only.

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.

Node parentNode
The node that contains this node. For example <table> for the <tbody> node. The Document node has no parent.

NodeList childNodes
List of all Nodes contained directly in the node (and not the Nodes they contain themselves). If there are no Nodes contained, the value is an empty NodeList (not null).

Node firstChild
First item in the node.

Node lastChild
Last element in the list of direct childs of the node.

Node previousSibling
Node before this one in the list of nodes at the same level.

Node nextSibling
The successor of this node.

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.

Node appendChild(Node appended)
Adds a node to the list of child Nodes.

Node cloneNode(Boolean)
Creates a copy of the node, with its attributes. The inner nodes are copied too if the argument is true, otherwise only the node is copied. This new node is detached from the tree. It has no parent. If the argument is true, it is as to detach a branch of the tree.

Boolean hasAttributes()
Returns true or false, if the node has attributes or not.

Boolean hasChildNodes()
Returns true or false, if the node contains other nodes or not.

Node insertBefore(Node inserted, Node here)
Inserts the first node in argument before the second. Possibly the new node takes place in firstChild. Returns the node inserted (its attributes such as parentNode, and so on do change).
It is a move: if the node was already present somewhere in the tree, it is deleted. If the node is a branch, the whole branch is inserted (and removed from where it existed).

Node removeChild(Node removed)
Removes a node or a branch. Returns the deleted Node.

Node replaceChild(Node new, Node old)
Replaces the second argument by the first. Returns the Node replaced but attributes as parentNode are changed. This may be a branch. If the replacing Node was in the tree, it is deleted.

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.

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

• Displaying dynamically a video reader with methods of Node.
  Adding a video player to a page, using the appendChild and setAttribute methods.

References

• DOM 2 core. Standard from the W3C.