The DOM (Document Object Model) is how the browser represents your HTML as a tree of objects. JavaScript can "reach into" this tree to change text, colors, or even delete whole sections of the page.
1. Selection
Before you can change an element, you have to "find" it.
document.getElementById(): Finds an element by its unique ID.document.querySelector(): The modern "Swiss Army Knife." It uses CSS selectors (like.classor#id) to find elements.
2. Manipulation
Once you have the element, you can change it:
.innerText: Changes the text inside..innerHTML: Changes the HTML tags inside..style: Changes CSS properties directly..classList.add/remove: Changes the CSS classes (cleaner than changing styles one by one).
The Code Example
Imagine you have this HTML: <h1 id="title">Hello World</h1>
// 1. Selecting the Element
const heading = document.querySelector("#title");
// 2. Changing the Content
heading.innerText = "Welcome to JavaScript!";
// 3. Changing Styles (Notice camelCase for CSS: 'background-color' becomes 'backgroundColor')
heading.style.color = "blue";
heading.style.fontSize = "40px";
// 4. Creating a New Element from Scratch
const newPara = document.createElement("p");
newPara.innerText = "This was added by JS!";
document.body.appendChild(newPara); // Puts it on the page
// 5. Best Practice: Adding/Removing Classes
// Instead of changing 10 styles, just toggle a CSS class
heading.classList.add("highlighted-text");