What is the DOM?
The [Document Object Model] (DOM) is an application programming interface (API) that structures your HTML document as a node tree. Every HTML tag, attribute, and text block is represented as a branch in this tree.
JavaScript interacts with the DOM to dynamically change elements, update styles, delete contents, and add features to your web pages on the fly.
To read the foundational specifications of the DOM, refer to the W3C DOM Technical Standards.
---
Selecting Elements from the DOM
To interact with an HTML element, JavaScript must select it first. Modern developments use two query methods:
* document.querySelector('selector'): Selects the first element matching the specified CSS selector.
* document.querySelectorAll('selector'): Selects all matching elements as a NodeList array.
#### Code Example: Selecting and Modifying Content
Assume your HTML document contains:
<h1 id="page-title">This is an old title.</h1>
<p class="info-text">This is info text 1.</p>
<p class="info-text">This is info text 2.</p>
Write this script in app.js:
// Select a single element by its ID selector
let mainTitle = document.querySelector("#page-title");
console.log(mainTitle.textContent);
// Modify the text content of the title
mainTitle.textContent = "Welcome to the Modern DOM API!";
// Select multiple elements by class
let textBlocks = document.querySelectorAll(".info-text");
textBlocks.forEach((block, index) => {
block.style.color = "blue";
block.textContent = Updated block content at index: ${index};
});
#### Visual Output Demonstration:
* Your browser's ` element immediately updates its text to "Welcome to the Modern DOM API!".
* Both info paragraphs change color to blue and display their respective updated text showing index positions 0 and 1.
---
Creating and Appending New Elements
You can also build new HTML elements from scratch inside your scripts.
#### Code Example: Generating a List Dynamically
// Create a new container element
let newDiv = document.createElement("div");
newDiv.id = "dynamic-container";
// Create child text
let newParagraph = document.createElement("p");
newParagraph.textContent = "This container and paragraph were built entirely using JS!";
// Append the paragraph to the div container, then append the container to the document body
newDiv.appendChild(newParagraph);
document.body.appendChild(newDiv);
#### Visual Output Demonstration:
* A new div element is appended at the bottom of the HTML page containing your new paragraph text.
---
Frequently Asked Questions (FAQs)
#### Q1: What is the difference between innerHTML and textContent?
* textContent updates or retrieves raw text content, treating HTML tags as literal text. innerHTML` parses raw strings as actual HTML, allowing you to inject complete HTML structures dynamically.
#### Q2: Is the DOM a part of JavaScript itself?
* No, the DOM is a web platform API provided by browsers. JavaScript is the programming language that interacts with this API to read and change web pages.
#### Q3: Does modifying the DOM in real-time update my index.html file on disk?
* No, DOM manipulation only changes the rendering tree in the user's active browser memory. It does not overwrite your actual file on disk.
