HTML DOM:
The HTML DOM defines a standard way for accessing and manipulating
HTML documents.
The DOM presents an HTML document as a tree-structure.
What is the DOM?
The DOM is a W3C (World Wide Web Consortium) standard.
The DOM defines a standard for accessing HTML and XML documents:
"The W3C Document Object Model (DOM) is a platform and
language-neutral interface that allows programs and scripts to dynamically
access and update the content, structure, and style of a document."
The W3C DOM standard is separated into 3 different parts:
- Core DOM - standard model for any structured document
- XML DOM - standard model for XML documents
- HTML DOM - standard model for HTML documents
What is the XML DOM?
The XML DOM defines the objects and properties of all
XML elements, and the methods to access them.
What is the HTML DOM?
- A standard object model for HTML
- A standard programming interface for HTML
- A W3C standard
The HTML DOM defines the objects and properties of all
HTML elements, and the methods to access them.
In other words:
The HTML DOM is a standard for how to get, change, add, or delete
HTML elements.
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:
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


