HTML DOM node
In the HTML DOM, everything is a node. DOM node tree is regarded as HTML.
DOM Nodes
DOM node
According to the W3C standard HTML DOM, HTML documents are all content nodes:
- The entire document is a document node
- Each HTML element is an element node
- Text HTML elements within the text node
- Each HTML is an attribute node
- Comments are comment nodes
HTML DOM node tree
HTML DOM will be treated as an HTML document tree. This structure is called a node tree:
HTML DOM tree instance
Node Father, Son and compatriots
Each node has a node in the tree hierarchy.
Parent (parent), the child (child) and fellow (sibling) and other terms used to describe these relationships. Parent node has a child node. Sibling child nodes are called siblings (brothers or sisters).
- In the node tree, the top node is called the root (root)
- Each node has a parent node, except the root (it has no parent)
- A node can have any number of children
- Compatriots have the same parent node node
The image below shows the relationship between the part of the node tree, and nodes:
Consider the following HTML fragment:
<head>
<title>DOM Tutorial</title>
</head>
<body>
<h1>DOM Lesson one</h1>
<p>Hello world!</p>
</body>
</html>
From the above the HTML:
- <Html> node has no parent; it is the root
- <Head> and <body> parent node is <html> node
- Text node "Hello world!" The parent node is <p> node
and:
- <Html> node has two child nodes: <head> and <body>
- <Head> node has a child node: <title> node
- <Title> node also has a child node: a text node "DOM Tutorial"
- <H1> and <p> node is a sibling, but also the <body> child node
and:
- <Head> element is the first child of the <html> element
- <Body> element is <html> last child element
- <H1> element is the first child of the <body> element
- <P> element is the last child of the <body> element
caveat!
DOM processing element node common mistake is to contain text.
In this example: <title> DOM Tutorial </ title>, the element node <title>, contains a value of "DOM Tutorial" text node.
Text node values can be accessed via the innerHTML attribute node.
You will learn more about innerHTML property in a later section.