Scribd
Upload
25 views5 pages

DOM in JavaScript Detailed

The Document Object Model (DOM) is a programming interface that represents HTML and XML documents as a tree of nodes, allowing programs to manipulate the document's structure, style, and content. Key features include accessing elements through various methods, modifying content and attributes, creating and removing elements, and handling events. The DOM enables real-time interaction with web pages, reflecting changes made through JavaScript instantly.

Uploaded by

vishwaskr14
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
25 views5 pages

DOM in JavaScript Detailed

The Document Object Model (DOM) is a programming interface that represents HTML and XML documents as a tree of nodes, allowing programs to manipulate the document's structure, style, and content. Key features include accessing elements through various methods, modifying content and attributes, creating and removing elements, and handling events. The DOM enables real-time interaction with web pages, reflecting changes made through JavaScript instantly.

Uploaded by

vishwaskr14
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/ 5

DOM (Document Object Model) in JavaScript

1. What is the DOM?

The DOM (Document Object Model) is a programming interface for HTML and XML documents. It

represents the page so that programs can change the document structure, style, and content. The

DOM represents the document as a tree of nodes.

Example HTML:

<html>

<head><title>My Page</title></head>

<body>

<h1>Hello, World!</h1>

<p>This is a paragraph.</p>

</body>

</html>

DOM Tree:

Document

html

head

title

body

h1

2. DOM Nodes and Node Types

- Document: The top-level node.


- Element Nodes: Represent HTML elements like <div>, <p>, etc.

- Text Nodes: Contain text inside elements.

- Comment Nodes: Represent HTML comments.

Node Types:

| Node Type | Constant | Value |

|---------------|--------------------|--------|

| Element | Node.ELEMENT_NODE | 1 |

| Text | Node.TEXT_NODE |3 |

| Comment | Node.COMMENT_NODE | 8 |

3. Accessing Elements

- document.getElementById("id")

- document.getElementsByClassName("class")

- document.getElementsByTagName("tag")

- document.querySelector("selector")

- document.querySelectorAll("selector")

Example:

const heading = document.getElementById("main-heading");

const paragraphs = document.querySelectorAll("p");

4. Modifying the DOM

- Changing Content:

document.getElementById("demo").innerText = "New text";

document.getElementById("demo").innerHTML = "<strong>Bold Text</strong>";


- Changing Attributes:

document.getElementById("link").href = "https://www.example.com";

- Changing Styles:

document.getElementById("box").style.backgroundColor = "blue";

5. Creating and Removing Elements

- Creating Elements:

let newDiv = document.createElement("div");

newDiv.textContent = "This is a new div";

document.body.appendChild(newDiv);

- Removing Elements:

let element = document.getElementById("remove-me");

element.parentNode.removeChild(element);

6. Event Handling

- Add Event Listener:

document.getElementById("btn").addEventListener("click", function() {

alert("Button clicked!");

});

Common Events:

click, mouseover, keydown, submit, load

7. DOM Traversal

- element.parentNode
- element.childNodes

- element.firstChild

- element.lastChild

- element.nextSibling

- element.previousSibling

Example:

let list = document.getElementById("myList");

let firstItem = list.firstChild;

8. Real-World Example

<button id="changeColor">Change Background</button>

<script>

document.getElementById("changeColor").addEventListener("click", function() {

document.body.style.backgroundColor = "lightgreen";

});

</script>

9. The DOM and the Browser

JavaScript uses the DOM API to interact with the document. Any changes made to the DOM using

JavaScript are instantly reflected on the web page.

10. Summary

| Feature | Purpose |

|--------------------|---------------------------------------------------|

| Tree structure | Organizes HTML elements as nodes |

| Access methods | Use selectors to grab elements |


| Manipulation | Change content, attributes, and styles |

| Event handling | Interact with user input |

You might also like