HTML DOM
DOM HOME DOM Intro DOM Nodes DOM Methods DOM Properties DOM Access DOM Modify DOM Content DOM Elements DOM Events DOM Navigation DOM SummaryDOM Examples
DOM Examples 1 DOM Examples 2DOM Reference
HTML DOM ObjectsHTML DOM Nodes
In the HTML DOM, everything is a node. The DOM is HTML 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 are text nodes
- Every HTML attribute is an attribute node
- Comments are comment nodes
The HTML DOM Node Tree
The HTML DOM views HTML documents as tree structures. The structure is called a Node Tree:
HTML DOM Tree Example
With the HTML DOM, all nodes in the tree can be accessed by JavaScript. All HTML elements (nodes) can be modified, and nodes can be created or deleted.
Node Parents, Children, and Siblings
The nodes in the node tree have a hierarchical relationship to each other.
The terms parent, child, and sibling are used to describe the relationships. Parent nodes have children. Children on the same level are called siblings (brothers or sisters).
- In a node tree, the top node is called the root
- Every node has exactly one parent, except the root (which has no parent)
- A node can have any number of children
- Siblings are nodes with the same parent
The following image illustrates a part of the node tree and the relationship between the nodes:
Look at the following HTML fragment:
<html>
<head>
<title>DOM Tutorial</title>
</head>
<body>
<h1>DOM Lesson one</h1>
<p>Hello world!</p>
</body>
</html>
<head>
<title>DOM Tutorial</title>
</head>
<body>
<h1>DOM Lesson one</h1>
<p>Hello world!</p>
</body>
</html>
From the HTML above:
- The <html> node has no parent node; it is the root node
- The parent node of the <head> and <body> nodes is the <html> node
- The parent node of the "Hello world!" text node is the <p> node
and:
- The <html> node has two child nodes: <head> and <body>
- The <head> node has one child node: the <title> node
- The <title> node also has one child node: the text node "DOM Tutorial"
- The <h1> and <p> nodes are siblings and child nodes 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 an element node to contain text.
In this example: <title>DOM Tutorial</title>, the element node <title>, holds 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 read more about the innerHTML property in a later chapter.
Your suggestion:
Close [X]
Thank You For Helping Us!
Your message has been sent to W3Schools.
Close [X]
