In 1998, W3C published the Level 1 DOM specification. This specification allowed access to and manipulation of every single element in an HTML page.
All browsers have implemented this recommendation, and therefore, incompatibility problems in the DOM have almost disappeared.
The DOM can be used by JavaScript to read and change HTML, XHTML, and XML documents.
According to the DOM, everything in an HTML document is a node.
The DOM says that:
- The entire document is a document node
- Every HTML tag is an element node
- The texts contained in the HTML elements are text nodes
- Every HTML attribute is an attribute node
- Comments are comment nodes
Nodes have a hierarchical relationship to each other.
All nodes in an HTML document form a document tree (or node tree). The tree starts at the document node and continues to branch out until it has reached all text nodes at the lowest level of the tree.
Look at the following HTML document:
<html>
<head>
<title>DOM Tutorial</title>
</head>
<body>
<h1>DOM Lesson one</h1>
<p>Hello world!</p>
</body>
</html>
|
All the nodes above have relationships to each other.
Every node except for the document node has a parent node.
Most element nodes have child nodes.
Nodes are siblings when they share a parent.
Nodes can also have descendants. Descendants are all the nodes that are children of a node, or children of those children, and so on.
Nodes can also have ancestors. Ancestors are nodes that are parents of a node, or parents of this parent, and so on.
You can find the element you want to manipulate in several ways:
- By using the getElementById() and getElementsByTagName() methods
- By using the parentNode, firstChild, and lastChild properties of an element node
The two methods getElementById() and getElementsByTagName(), can find any HTML element in the entire document.
These methods ignore the document structure.
If you want to find all <p> elements in the document, the getElementsByTagName() method will find them all, regardless of on which level the <p> elements are.
Furthermore, the getElementById() method always returns the correct element, wherever it is hidden in the document structure.
These two methods give you the HTML elements you need regardless of where they are in the document!
Note: The getElementById() method doesn’t work in XML. In an XML document, you must search through attributes that have the type id, and this type must be declared in the XML document’s Document Type Definition (DTD).
The getElementsByTagName() method returns all elements (as a nodeList) with the specified tag name that are descendants of the element you are on when using this method.
The getElementsByTagName() can be used on any HTML element, and also on the document.
When working with a nodeList, we usually store the list in a variable, like this:
var x=document.getElementsByTagName("p");
|
Now the variable x contains a list of all <p> elements in the page, and we can access the <p> elements by their index numbers.
Note: The index starts at 0.
You can loop through the nodeList by using the length property:
var x=document.getElementsByTagName("p");
for (var i=0;i<x.length;i++) {
// do something with each paragraph
}
|
You can also access a specific element by using the index number.
To access the third <p> you can write:
In general,
getElementById() Syntax
document.getElementById("someID“);
|
getElementsByTagName() Syntax
document.getElementsByTagName(“tagname”);
|
or:
document.getElementById('someID').getElementsByTagName("tagname");
|
Example 1
The following example returns a nodeList of all <p> elements in the document:
document.getElementsByTagName("p");
|
Example 2
The following example returns a nodeList of all <p> elements that are descendants of the element with id=”maindiv”:
document.getElementById('maindiv').getElementsByTagName("p");
|
Node Information
Every node has some properties that contain some information about the node. The properties are:
- nodeName
- nodeValue
- nodeType
nodeName
The nodeName property contains the name of a node.
- The nodeName of an element node is the tag name
- The nodeName of an attribute node is the attribute name
- The name of a text node is always #text
- The name of the document node is always #document
Note: nodeName always contains the uppercase tag name of an HTML element.
nodeValue
On text nodes, the nodeValue property contains the text.
On attribute nodes, the nodeValue property contains the attribute value.
The nodeValue property is not available on document and element nodes.
nodeType
The nodeType property returns the type of node.
The most important node types are:
| Element type |
NodeType |
| Element |
1 |
| Attribute |
2 |
| Text |
3 |
| Comment |
8 |
| Document |
9 |
parentNode, firstChild, and lastChild
The three properties parentNode, firstChild, and lastChild follow the document structure and allow short-distance travel in the document.
Look at the following HTML fragment:
<table>
<tr>
<td>John</td>
<td>Doe</td>
<td>Alaska</td>
</tr>
</table>
|
In the HTML code above, the first <td> is the firstChild of the <tr> element, and the last <td> is the lastChild of the <tr> element.
Furthermore, the <tr> is the parentNode of every <td> element.
The most common use of firstChild is to access the text of an element:
var x=[a paragraph];
var text=x.firstChild.nodeValue;
|
The parentNode property is often used to change the document structure. Suppose you want to remove the node with id=”maindiv” from the document:
var x=document.getElementById("maindiv"); x.parentNode.removeChild(x);
|
First you find the node with the specified id, then you move to its parent and execute the removeChild() method.
Root Nodes
There are two special document properties that allow access to the tags:
- document.documentElement
- document.body
The first property returns the root node of the document and exists in all XML and HTML documents.
The second property is a special addition for HTML pages, and gives direct access to the <body> tag.