The Document Object Model
The Document Object Model
documents. The DOM presents an HTML document as a TREE-STRUCTURE. The DOM is a W3C
(World Wide Web Consortium) standard. 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 Document Object Model (DOM) is the model that describes how all elements in an HTML page, like
input fields, images, paragraphs etc., are related to the topmost structure: the document itself.
The HTML DOM views an HTML document as a tree-structure. The tree structure is called a node-tree. In
the DOM, everything in an HTML document is a node. All nodes can be accessed through the tree. Their
contents can be modified or deleted, and new elements can be created.
The nodes in the node tree have a hierarchical relationship to each other. On the basis of hierarchy,
Nodes can be divided into three categories:
1. Parent Nodes
2. Child Nodes
3. Sibling Nodes: Child Nodes on the same level are called siblings (brothers or sisters).
Example:
<p>This is a paragraph</p>
Note:
Example:
Here "p" is element node, 'This is a paragraph" is a text node and "align" is the attribute node.
Node Properties
In the HTML DOM, each node is an object.Objects have methods and properties that can be accessed
and manipulated by JavaScript. Three important node properties are:
1. nodeName
2. nodeValue
3. nodeType
1. nodeName is read-only
2. nodeName of an element node is the same as the tag name
3. nodeName of an attribute node is the attribute name
4. nodeName of a text node is always #text
5. nodeName of the document node is always #document
Note: nodeName always contains the uppercase tag name of an HTML element.
The nodeType property returns the type of node. nodeType is read only.
The most important node types are: Element Node, Text Node, Attribute Node, Comment Node and
Document Node