KEMBAR78
DOM Assignment | PDF | Document Object Model | Java Script
Scribd
Upload
11 views2 pages

DOM Assignment

The Document Object Model (DOM) is a programming interface that represents HTML documents as structured trees of objects and nodes, allowing JavaScript to access and manipulate webpage content dynamically. JavaScript uses the DOM to change text, styles, and structure of HTML elements without reloading the page, enhancing interactivity. Through various methods, JavaScript can modify existing elements, add new ones, and remove elements, making static pages more dynamic.

Uploaded by

dignifiedmt
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
11 views2 pages

DOM Assignment

The Document Object Model (DOM) is a programming interface that represents HTML documents as structured trees of objects and nodes, allowing JavaScript to access and manipulate webpage content dynamically. JavaScript uses the DOM to change text, styles, and structure of HTML elements without reloading the page, enhancing interactivity. Through various methods, JavaScript can modify existing elements, add new ones, and remove elements, making static pages more dynamic.

Uploaded by

dignifiedmt
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

Name: KHADIJA MUHAMMAD TASIU

1.​ What is DOM


2.​ How Does JavaScript use DOM to manipulate HTML content and structure

1. What is DOM?

The Document Object Model (DOM) is a programming interface that represents an HTML
document as a structured tree of objects and nodes. Each element in the webpage, such as
headings, paragraphs, images, and links, is represented as a node in this tree. The DOM acts
as a map or blueprint that browsers create so programs like JavaScript can find, access, and
modify any part of a webpage’s structure and content dynamically.

2. How Does JavaScript Use DOM to Manipulate HTML Content and Structure?

JavaScript uses the DOM as a bridge to interact with the HTML elements on a webpage. By
accessing the DOM, JavaScript can dynamically change the text, styles, structure, and even
add or remove elements from the webpage without needing to reload the page. This makes web
pages interactive and responsive to user actions.

For example, JavaScript can:

- Change the content of elements using properties like `innerHTML` or `textContent`:


JavaScript document.getElementById("example").innerHTML = "New
<strong>content</strong>";

- Modify styles directly by changing CSS properties:


JavaScript
document.getElementById("example").style.color = "red";
- Add, remove, or toggle CSS classes for styling and animations:
JavaScript
document.getElementById("example").classList.add("highlight");

- Create new elements and add them into the DOM:


JavaScript
const newParagraph = document.createElement("p");
newParagraph.textContent = "This is a new paragraph.";
document.getElementById("container").appendChild(newParagraph);

- Remove existing elements:


JavaScript
const element = document.getElementById("oldElement");
element.parentNode.removeChild(element);
In summary, JavaScript leverages the DOM to make static HTML pages dynamic by reading
and manipulating their content, structure, and styles in real time, enhancing the user experience
with interactivity and up-to-date content.

Reference:
[1] JavaScript HTML DOM Examples - W3Schools
https://www.w3schools.com/js/js_dom_examples.asp
[2] JavaScript - How to Manipulate DOM Elements? - GeeksforGeeks
https://www.geeksforgeeks.org/javascript/how-to-manipulate-dom-elements-in-javascript/
[3] DOM scripting introduction - Learn web development | MDN
https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting/DOM_scriptin
g
[4] DOM manipulation in JavaScript - AlmaBetter
https://www.almabetter.com/bytes/tutorials/javascript/dom-manipulation
[5] The JavaScript DOM Manipulation Handbook - freeCodeCamp
https://www.freecodecamp.org/news/the-javascript-dom-manipulation-handbook/
[6] JavaScript HTML DOM Methods - W3Schools
https://www.w3schools.com/js/js_htmldom_methods.asp
[7] DOM Manipulation in JavaScript – A Comprehensive Guide for ...
https://www.freecodecamp.org/news/dom-manipulation-in-javascript/

You might also like