Scribd
Upload
53 views

The Document Object Model

The DOM (Document Object Model) defines a standard way to access and manipulate HTML documents. It presents an HTML document as a tree structure with nodes that can be accessed and modified. The DOM is a W3C standard and allows programs and scripts to dynamically access and update the content, structure, and style of a document. The DOM views an HTML document as a hierarchical node tree, with different types of nodes like element nodes, text nodes, attribute nodes, and comment nodes. Each node is an object that has properties like nodeName, nodeValue, and nodeType that can be accessed and manipulated using JavaScript.

Uploaded by

Tech Channel
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
53 views

The Document Object Model

The DOM (Document Object Model) defines a standard way to access and manipulate HTML documents. It presents an HTML document as a tree structure with nodes that can be accessed and modified. The DOM is a W3C standard and allows programs and scripts to dynamically access and update the content, structure, and style of a document. The DOM views an HTML document as a hierarchical node tree, with different types of nodes like element nodes, text nodes, attribute nodes, and comment nodes. Each node is an object that has properties like nodeName, nodeValue, and nodeType that can be accessed and manipulated using JavaScript.

Uploaded by

Tech Channel
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

The Document Object Model (DOM) defines a standard way for accessing and manipulating HTML

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.

DOM: The Tree and Node Structure

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.

Note: The Root Node of DOM Tree is DOCUMENT.

document.documentElement - returns the root node of the document


document.body - gives direct access to the <body> tag

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>

Here "p" is parent node and 'This is a paragraph' is a child node.

Note:

1. In a node tree, the top node is called the root


2. Every node, except the root, has exactly one parent node
3. A node can have any number of children
4. A leaf is a node with no children
5. Siblings are nodes with the same parent

Nodes can also be classified as:

1. Element Nodes: Every HTML element is an element node


2. Text Nodes: The text in the HTML elements are text nodes. In the HTML DOM the value of the text
node can be accessed by the innerHTML property.
3. Attribute Nodes: Every HTML attribute is an attribute node
4. Comment Nodes: Comments are also treated as nodes in DOM.
5. Document Node: It is the parent node of DOM.. The entire document is a document node

Example:

<p align="right">This is a paragraph</p>

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

The nodeName Property

The nodeName property specifies the name of a node.

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 nodeValue Property

1. The nodeValue property specifies the value of a node.


2. nodeValue for element nodes is undefined
3. nodeValue for text nodes is the text itself
4. nodeValue for attribute nodes is the attribute value

The nodeType Property

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

You might also like