Latest web development tutorials

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

DOM HTML tree

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:

Node tree

Consider 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 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.