Scribd
Upload
2 views

DOM_Manipulation_and_DOM_Tree

The Document Object Model (DOM) is a programming interface that represents HTML and XML documents as a tree of objects, allowing for dynamic manipulation through languages like JavaScript. DOM manipulation involves accessing and modifying document elements, attributes, and content using various methods such as getElementById() and createElement(). The DOM tree is constructed during page load, providing a structured representation of the document that facilitates efficient updates and interactivity.

Uploaded by

shreesha.alevoor664
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
2 views

DOM_Manipulation_and_DOM_Tree

The Document Object Model (DOM) is a programming interface that represents HTML and XML documents as a tree of objects, allowing for dynamic manipulation through languages like JavaScript. DOM manipulation involves accessing and modifying document elements, attributes, and content using various methods such as getElementById() and createElement(). The DOM tree is constructed during page load, providing a structured representation of the document that facilitates efficient updates and interactivity.

Uploaded by

shreesha.alevoor664
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 2

DOM Manipulation and DOM Tree

Construction
1. What is DOM?
The DOM (Document Object Model) is a programming interface provided by the browser for
HTML and XML documents. It represents the page structure as a tree of objects, allowing
programming languages like JavaScript to access and manipulate the document's content,
structure, and style dynamically.

2. DOM Manipulation
DOM Manipulation refers to the process of accessing and modifying the elements, attributes,
or content of an HTML document through scripting languages (primarily JavaScript).

Common DOM Manipulation Methods:


- getElementById() – Selects element by ID
- getElementsByClassName() – Selects elements by class
- querySelector() / querySelectorAll() – Selects elements using CSS selectors
- createElement() – Creates a new element
- appendChild() / removeChild() – Adds or removes nodes
- innerHTML / textContent – Modifies content
- setAttribute() / removeAttribute() – Modifies attributes

Example:
document.getElementById("demo").textContent = "Hello, DOM!";

3. DOM Tree Construction


When an HTML document is loaded in the browser, it is parsed and converted into a DOM
tree, which is a hierarchical structure of nodes.

Process of DOM Tree Construction:


1. HTML Parsing: The browser reads HTML from top to bottom.
2. Tokenization: Each element, attribute, and text becomes a token.
3. Node Creation: Tokens are converted into nodes.
4. Tree Formation: Nodes are arranged in a tree structure based on nesting.

Types of DOM Nodes:


- Document Node: Root of the DOM tree (e.g., document)
- Element Node: HTML tags (e.g., <div>, <p>)
- Text Node: Text inside elements
- Attribute Node: Attributes like class, id
- Comment Node: HTML comments
4. Visual Representation of DOM Tree:
For this HTML:
<html>
<body>
<h1>Hello</h1>
<p>Welcome</p>
</body>
</html>

DOM Tree:
Document
└── html
└── body
├── h1
│ └── "Hello"
└── p
└── "Welcome"

5. Importance of DOM Manipulation:


- Dynamic content updates without page reload
- Enhances user interactivity (e.g., form validation)
- Used in modern frameworks (React, Angular, Vue)
- Essential for single-page applications (SPAs)

Conclusion
DOM Manipulation allows developers to dynamically interact with the structure and
content of a webpage using JavaScript. The DOM Tree, built during page load, represents the
document as a structured tree of nodes, enabling efficient access and modification of HTML
elements.

You might also like