YouTip LogoYouTip

Home > HTML DOM > Htmldom Nodes

Htmldom Nodes

📅 2026-06-18 | 📂 HTML DOM

HTML DOM Nodes | Tutorial

Tutorial -- Learning is not just about technology, but also about dreams!

HTML DOM Tutorial

HTML DOM Tutorial HTML DOM Introduction HTML DOM Nodes HTML DOM Methods HTML DOM Properties HTML DOM Access HTML DOM Modify HTML DOM Modify HTML Content HTML DOM Elements HTML DOM Events HTML DOM Navigation HTML DOM Summary DOM Examples

DOM Reference

HTML DOM Objects

HTML DOM Introduction

HTML DOM Methods

HTML DOM Nodes

In the HTML DOM, everything is a node. The DOM is an HTML document 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 is text nodes
  • Every HTML attribute is an attribute node
  • Comments are comment nodes

HTML DOM Node Tree

The HTML DOM views an HTML document as a tree structure. This structure is called a node tree:

HTML DOM Tree Example

DOM HTML tree

Node Parent, Child, and Siblings

Nodes in the node tree have a hierarchical relationship to each other.

The terms parent, child, and sibling are used to describe these relationships. A parent node has child nodes. Child nodes on the same level are called siblings (brothers or sisters).

  • In the node tree, the top node is called the root (root).
  • Every node has a parent, except the root (it has no parent).
  • A node can have any number of children.
  • Siblings are nodes that share the same parent.

The image below shows a part of the node tree, and the relationships between nodes:

Node tree

Please look at the following HTML fragment:

DOM Tutorial

DOM Lesson 1

Hello world!

From the HTML above:

  • The <html> node has no parent; it is the root node
  • The parent of <head> and <body> is the <html> node
  • The parent of the text node "Hello world!" is the <p> node

And:

  • The <html> node has two children: <head> and <body>
  • The <head> node has two children: the <meta> and <title> nodes
  • The <title> node also has one child: the text node "DOM Tutorial"
  • The <h1> and <p> nodes are siblings, and they are also children 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 element nodes to contain text.

In this example: <title>DOM Tutorial</title>, the element node <title>, contains 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 learn more about the innerHTML property in a later chapter.

HTML DOM Introduction

HTML DOM Methods

iFlytek Xingchen Coding Plan includes free model call quota, DeepSeek, GLM, Kimi, MiniMax, one-stop experience and deployment platform. Configuration Guide ¥3.9/month Subscribe Now

Click to Share Notes

Cancel

Write notes...

Image URL

Image Description

Image Size ×

Share Notes

  • Nickname Nickname (Required)
  • Email Email (Required)
  • Reference URL Reference URL

Category Navigation

← Htmldom MethodsProp Attr Nodename →

📂 Categories