HTML DOM Nodes
In the HTML DOM, everything is a node. The DOM is HTML viewed as a node tree.
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 are text nodes
- Every HTML attribute is an attribute node
- Comments are comment nodes
The HTML DOM Node Tree
The HTML DOM views HTML documents as tree structures. The structure is called a
Node Tree:
With the HTML DOM, all nodes in the tree can be accessed by JavaScript. All
HTML elements (nodes) can be modified, and
nodes can be created or deleted.
Node Parents, Children, and Siblings
The nodes in the node tree have a hierarchical relationship to each other.
The terms parent, child, and sibling are used to describe the relationships.
Parent nodes have children. Children on the same level are called siblings
(brothers or sisters).
- In a node tree, the top node is called the root
- Every node has exactly one parent, except the root (which has no
parent)
- A node can have any number of children
- Siblings are nodes with the same parent
The following image illustrates a part of the node tree and the relationship between the nodes:
Look at the following HTML fragment:
<html>
<head>
<title>DOM Tutorial</title>
</head>
<body>
<h1>DOM Lesson one</h1>
<p>Hello world!</p>
</body>
</html>
From the HTML above:
- The <html> node has no parent node; it is the root node
- The parent node of the <head> and <body> nodes is the <html> node
- The parent node of the "Hello world!" text node is the <p> node
and:
- The <html> node has two child nodes: <head> and <body>
- The <head> node has one child node: the <title> node
- The <title> node also has one child node: the text node "DOM Tutorial"
- The <h1> and <p> nodes are siblings and child nodes of <body>
and:
- The <head> element is the first child of the <html> element
- The <body> element is the last child of the <html> element
- The <h1> element is the first child of the <body> element
- The <p> element is the last child of the <body> element
Warning !
A common error in DOM processing is to expect an element node to contain
text.
In this example: <title>DOM Tutorial</title>, the element node
<title>, holds a text node with the value "DOM Tutorial".
The value of the text node can be accessed by the
node's
innerHTML property.
You will read more about the innerHTML property in a later chapter.
Thank You For Helping Us!
Your message has been sent to W3Schools.
Close [X]