1. Home
  2. HTML DOM node

The best HTML DOM node Tutorial In 2024, In this tutorial you can learn DOM Nodes,DOM node,HTML DOM node tree,HTML DOM tree instance,Node Father, Son and compatriots,caveat!,

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.

Hot Tools

Other Tools

Online Tutorial

Website Navigation

HTML DOM node
10/30