Scribd
Upload
5 views3 pages

ST 4th Sem Bca

The Document Object Model (DOM) allows developers to programmatically manipulate HTML and XML documents using JavaScript, enabling dynamic changes to web pages. DOM manipulation includes tasks such as accessing, modifying, adding, or deleting elements and attributes, which is essential for creating interactive user interfaces and responsive applications. Mastering DOM manipulation is crucial for modern web development, as it enhances user experience and forms the foundation for frameworks like React and Angular.

Uploaded by

mayikissyou2358
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
5 views3 pages

ST 4th Sem Bca

The Document Object Model (DOM) allows developers to programmatically manipulate HTML and XML documents using JavaScript, enabling dynamic changes to web pages. DOM manipulation includes tasks such as accessing, modifying, adding, or deleting elements and attributes, which is essential for creating interactive user interfaces and responsive applications. Mastering DOM manipulation is crucial for modern web development, as it enhances user experience and forms the foundation for frameworks like React and Angular.

Uploaded by

mayikissyou2358
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/ 3

Manipulating Documents Using DOM

1. Introduction

The Document Object Model (DOM) allows developers to interact with and manipulate HTML and XML
documents programmatically. Using JavaScript and the DOM API, web developers can dynamically change
the structure, content, and style of a web page after it has been loaded into the browser.

2. What Is DOM Manipulation?

DOM Manipulation refers to accessing, modifying, adding, or deleting elements, attributes, and
styles in an HTML document using JavaScript. This is crucial for creating dynamic and interactive
websites.

3. Why Use DOM Manipulation?

- Change content dynamically (e.g., update a message after user input).

- Create interactive user interfaces.

- Validate form data in real-time.

- React to user events (e.g., clicks, scrolls).

- Build Single Page Applications (SPAs).

4. Common DOM Manipulation Tasks

A. Accessing Elements

document.getElementById("id");

document.getElementsByClassName("class");

document.getElementsByTagName("tag");

document.querySelector(".class #id");

B. Changing Content

document.getElementById("demo").innerHTML = "Hello DOM!";

C. Changing Attributes

var img = document.getElementById("myImage");

img.src = "new-image.jpg";

img.setAttribute("alt", "New Image");

D. Changing Styles

document.getElementById("demo").style.color = "blue";

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

E. Creating and Adding Elements

var para = document.createElement("p");


para.textContent = "New Paragraph";

document.body.appendChild(para);

F. Removing Elements

var element = document.getElementById("demo");

element.remove(); // or

element.parentNode.removeChild(element);

G. Replacing Elements

var newEl = document.createElement("h2");

newEl.textContent = "Replaced Heading";

var oldEl = document.getElementById("oldHeading");

oldEl.parentNode.replaceChild(newEl, oldEl);

5. DOM Event Handling (Optional but Common)

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

alert("Button Clicked!");

});

6. Real-World Example

<button onclick="changeText()">Click Me!</button>

<p id="text">Old Text</p>

<script>

function changeText() {

document.getElementById("text").innerHTML = "Text changed using DOM!";

</script>

Explanation: When the user clicks the button, JavaScript accesses the paragraph element and changes
its content dynamically using the DOM.

7. Advantages of DOM Manipulation

- Enables interactive user experiences.

- Makes websites responsive to real-time input.

- Avoids page reloads by updating content dynamically.

- Forms the foundation of modern JavaScript frameworks (e.g., React, Angular).

8. Conclusion

DOM manipulation is a core aspect of client-side web development, allowing developers to dynamically
modify and interact with documents. It enables responsive, user-friendly applications by changing
content, structure, and style in real time. Mastering DOM manipulation is essential for building
modern, interactive web applications.

You might also like