JavaScript Introduction | Document Object Model | Node

Node

The HTML DOM stores information in hierarchical units called nodes. The HTML DOM defines these nodes and describes the relationships between them.

HTML Node Tree

Information in an HTML document is stored in a hierarchical structure called a node tree. This node tree is a collection of nodes and shows the relationships between them.

The node tree starts from the top-level root node and extends down to the lowest-level text nodes. In JavaScript, you can use the HTML DOM to access all nodes included in the node tree.

Types of Nodes

According to the W3C HTML DOM standard, everything in an HTML document is a node.

Representative types of nodes that make up an HTML document are as follows.

Node Description
document node A node that represents the entire HTML document.
element node Every HTML element is an element node, and it is the only node type that can have attribute nodes.
attribute node Every attribute of an HTML element is an attribute node and contains information about the element node. However, it is not included among the child nodes of that element node.
text node All text in an HTML document is a text node.
comment node All comments in an HTML document are comment nodes.

Relationships Between Nodes

All nodes in the node tree have hierarchical relationships with one another.

At the top of the node tree, there is only one root node.

Every node except the root node has exactly one parent node. Every element node can have child nodes.

A sibling node refers to any node that has the same parent node. An ancestor node refers to all nodes that exist hierarchically above the current node, including its parent node. A descendant node refers to all nodes that exist hierarchically below the current node, including its child nodes.