HTML DOM node
May 09, 2021 HTML DOM
Table of contents
HTML DOM node
In HTML DOM, everything is a node. DoM is HTML that is considered a node tree.
DOM Nodes
The DOM node
According to the HTML DOM standard of W3C, everything in an HTML document is a node:
- The entire document is a document node
- Each HTML element is an element node
- The text within the HTML element is a text node
- Each HTML property is a property node
- A comment is a comment node
HTML DOM node tree
HTML DOM treats HTML documents as tree structures. This structure is called the node tree:
HTML DOM tree instance
Node parents, children, and siblings
Nodes in the node tree have hierarchical relationships with each other.
Terms such as parent, child, and sibling are used to describe these relationships. T he parent node has a child node. Children of siblings are called siblings (brothers or sisters).
- In a node tree, the top node is called root
- Each node has a parent node, except the root (it does not have a parent node)
- A node can have any number of child nodes
- A sibling is a node that has the same parent node
The following image shows part of the node tree and the relationships between the nodes:
Take a look at the HTML fragment below:
<html>
<head>
<title>DOM Tutorial</title>
</head>
<body>
<h1>DOM Lesson one</h1>
<p>Hello world!</p>
</body>
</html> As can be seen from the HTML fragment above:
- The node does not have a parent;
- The parent nodes of slt;head and slt;body are the nodes of slt;html.gt;
- The parent node of the text node "Hello world!" is the node
And:
- The nodes have two child nodes:
- The node has a child node:
- The node also has a child node: the text node "DOM Tutorial"
- The nodes are sibling nodes and are also children of slt;body
And:
- The element is the first child node of the element
- The element is the last child node of the element
- The element is the first child node of the element
- The element is the last child node of the element
Warning!
A common error in DOM processing is that you want the element node to contain text.
In this example, the element node, the dom tutorial, contains a text node with the value "DOM tutorial".
The value of the text node can be accessed through the node's innerHTML property.
You'll learn more about innerHTML properties in a later section.