HTML DOM - Node Access
With the DOM, we can access every node in an HTML document. We can access a node in three ways:
- By using the getElementById() method
- By using the getElementsByTagName() method
- By navigating the node tree, using the node relationships
The getElementById() method returns the element with the specified ID:
getElementById() Syntax
node.getElementById("id");
The following example gets the element with id="intro":
getElementById() Example
document.getElementById("intro");
Note: The getElementById() method doesn't work in XML.
getElementsByTagName() returns all elements with a specified tag name.
getElementsByTagName() Syntax
node.getElementsByTagName("tagname");
The following example returns a nodeList of all <p> elements in the document:
getElementsByTagName() Example
document.getElementsByTagName("p");
The following example returns a nodeList of all <p> elements that are descendants of the element with id="main":
document.getElementById('main').getElementsByTagName("p");
The getElementsByTagName() method returns a node-list. A node-list is an array of nodes. The following code selects all <p> nodes in a node-list:
DOM Node List Example
x=document.getElementsByTagName("p");
The nodes can be accessed by index number. To access the second <p> you can write:
y=x[1];
<html>
<body>
<p>Hello World!</p>
<p>The DOM is very useful!</p>
<script type="text/javascript">
x=document.getElementsByTagName("p");
document.write("Text of second paragraph: " + x[1].innerHTML);
</script>
</body>
</html>
DOM Node List Display
Hello World!
The DOM is very useful!
Note: The index starts at 0.
The length property defines the number of nodes in a node-list. You can loop through a node-list by using the length property:
DOM Nodes List Length Example
x=document.getElementsByTagName("p");
for (i=0;i
Example explained:
- Get all <p> element nodes
- For each <p> element, output the value of its text node
The three properties; parentNode, firstChild, and lastChild, follow the document structure and allow short-distance travel in a document. Look at the following HTML fragment:
<html>
<body>
<p>Hello World!</p>
<div>
<p>The DOM is very useful!</p>
<p>This example demonstrates node relationships.</p>
</div>
</body>
</html>
In the HTML code above, the first p element is the first child node (firstChild) of the body element, and the div element is the last child node (lastChild) of the body element. The parent node (parentNode) of the first p element and the div element, is the the body element, and the parent node of the p elements inside the div element, is the div element.
The firstChild property can also be used to access the text of an element:
Navigating Node Relationships Example
<html>
<body>
<p id="intro">Hello World!</p>
<script type="text/javascript">
x=document.getElementById("intro");
document.write(x.firstChild.nodeValue);
</script>
</body>
</html>
DOM Root Nodes
There are two special document properties that allow access to the tags:
- document.documentElement - returns the root node of the document
- document.body - gives direct access to the <body> tag
