HTML DOM Nodes
In the DOM, everything in an HTML document is a node.
DOM Nodes
According to the DOM, everything in an HTML document is a node:
- The entire document is a document node.
- Every HTML tag is an element node.
- The texts contained in the HTML elements are text nodes.
- Every HTML attribute is an attribute node.
- Comments are comment nodes.
A DOM Example
The root node in the HTML is <html>.
All other nodes in the document are contained within <html>.
The <html> node has two child nodes: <head> and <body>.
The <head> node holds a <title> node.
The <body> node holds <h1> and <p> nodes.
|
|
<html>
<head>
<title>DOM Tutorial</title>
</head>
<body>
<h1>DOM Lesson one</h1>
<p>Hello, World!</p>
</body>
</html>
|
|
Text Is Always Stored in Text Nodes
A common error in DOM processing is to expect an element to contain text.
However, the text of an element node is stored in a text node.
For example:
<title>DOM Tutorial</title>
the element node <title>, holds a text node with the value “DOM Tutorial.”
“DOM Tutorial” is not the value of the <title> element!
However, in the HTML DOM the value of the text node can be accessed by the innerHTML property, which defines both the HTML code and the text that occurs between that element’s opening and closing tags.
Demonstration
The following demonstration shows how the script of HTML and JavaScript is displayed on the Web.