With the HTML DOM, you can navigate the node tree using node relationships.
DOM Nodes
According to the W3C HTML DOM standard, everything in an HTML document is a node:
- The entire document is a document node.
- Every HTML element is an element node.
- The text inside HTML elements is a text node.
- Every HTML attribute is an attribute node (deprecated).
- All comments are comment nodes.
Node Tree
With the HTML DOM, all nodes in the node tree can be accessed, created, modified, or deleted using JavaScript.
Node Relationships
Nodes in the node tree have hierarchical relationships:
- Parent: A node that has children.
- Child: A node that has a parent.
- Sibling: Nodes that share the same parent.
Example Node Tree:
<html> <head> <title>DOM Tutorial</title> </head> <body> <h1>DOM Lesson One</h1> <p>Hello world!</p> </body></html>Navigating Between Nodes
You can use the following node properties to navigate between nodes with JavaScript:
- parentNode
- childNodes[nodenumber]
- firstChild
- lastChild
- nextSibling
- previousSibling
Child Nodes and Node Values
A common error in DOM processing is expecting an element node to contain text.
Example:
<title id="demo">DOM Tutorial</title>Accessing the text content of the <title> element:let myTitle = document.getElementById("demo").innerHTML;Or using the node's first child:myTitle = document.getElementById("demo").firstChild.nodeValue;Or accessing the first child using childNodes:myTitle = document.getElementById("demo").childNodes[0].nodeValue;
Example 1:
<!DOCTYPE html><html><body><h1 id="id01">My First Page</h1><p id="id02"></p><script>document.getElementById("id02").innerHTML = document.getElementById("id01").innerHTML;</script></body></html>Example 2:
<!DOCTYPE html><html><body><h1 id="id01">My First Page</h1><p id="id02"></p><script>document.getElementById("id02").innerHTML = document.getElementById("id01").firstChild.nodeValue;</script></body></html>
Example 3:
<!DOCTYPE html><html><body><h1 id="id01">My First Page</h1><p id="id02"></p><script>document.getElementById("id02").innerHTML = document.getElementById("id01").childNodes[0].nodeValue;</script></body></html>
DOM Root Nodes
You can access the full document using these properties:
- document.body: The body of the document.
- document.documentElement: The entire document.
Example 1:
<!DOCTYPE html><html><body><h2>JavaScript HTML DOM</h2><p>Displaying document.body</p><p id="demo"></p><script>document.getElementById("demo").innerHTML = document.body.innerHTML;</script></body></html>
Example 2:
<!DOCTYPE html><html><body><h2>JavaScript HTML DOM</h2><p>Displaying document.documentElement</p><p id="demo"></p><script>document.getElementById("demo").innerHTML = document.documentElement.innerHTML;</script></body></html>
The nodeName Property
The nodeName property specifies the name of a node and is read-only.
- nodeName of an element node is the tag name.
- nodeName of an attribute node is the attribute name.
- nodeName of a text node is always #text.
- nodeName of the document node is always #document.
Example:
<h1 id="id01">My First Page</h1><p id="id02"></p><script>document.getElementById("id02").innerHTML = document.getElementById("id01").nodeName;</script>
Note: nodeName always contains the uppercase tag name of an HTML element.
The nodeValue Property
The nodeValue property specifies the value of a node:
- nodeValue for element nodes is null.
- nodeValue for text nodes is the text itself.
- nodeValue for attribute nodes is the attribute value.
The nodeType Property
The nodeType property is read-only and returns the type of a node.
Example:
<h1 id="id01">My First Page</h1><p id="id02"></p><script>document.getElementById("id02").innerHTML = document.getElementById("id01").nodeType;</script>
