JavaScript HTML DOM
The DOM is how JavaScript sees and changes an HTML page while it is open in the browser.
What is the DOM?
When a page loads, the browser builds a Document Object Model (DOM): a tree of objects, one for every element. JavaScript can use this tree to:
- Find any element on the page
- Change its text, attributes and styles
- Add new elements and remove old ones
- React to events on any element
The whole page is the document object. Everything starts from it.
Finding Elements
| Method | Returns |
|---|---|
document.getElementById("id") | The element with that id |
document.querySelector("css selector") | The first matching element |
document.querySelectorAll("css selector") | A list of all matching elements |
document.getElementsByClassName("name") | All elements with that class |
querySelector accepts any CSS selector, like "#menu", ".price" or "ul li", so it is the most flexible.
Example
<!DOCTYPE html>
<html>
<body>
<p class="price">Rs 500</p>
<p class="price">Rs 1200</p>
<p class="price">Rs 80</p>
<p id="demo"></p>
<script>
const prices = document.querySelectorAll(".price");
prices.forEach(p => p.style.color = "crimson");
document.getElementById("demo").innerHTML = "Found " + prices.length + " prices.";
</script>
</body>
</html>Changing Content and Attributes
element.textContentsets plain textelement.innerHTMLsets HTML (tags are read)element.setAttribute(name, value)or a property likeelement.srcchanges attributes
Example
<!DOCTYPE html>
<html>
<body>
<a id="link" href="#">A link</a>
<p id="info"></p>
<script>
const link = document.getElementById("link");
link.textContent = "Visit Workownix";
link.setAttribute("href", "https://workownix.com");
document.getElementById("info").textContent = "The link now goes to " + link.getAttribute("href");
</script>
</body>
</html>The link now goes to https://workownix.com
Changing Styles and Classes
You can set a single style with element.style. CSS property names with a hyphen become camelCase: background-color becomes backgroundColor.
A cleaner way is to keep styles in CSS and switch classes with classList:
| Method | What it does |
|---|---|
classList.add("x") | Adds a class |
classList.remove("x") | Removes a class |
classList.toggle("x") | Adds it if missing, removes it if present |
classList.contains("x") | True if the element has it |
Example
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: sans-serif; padding: 20px; }
.dark { background: #222; color: #f0db4f; }
</style>
</head>
<body>
<h2>Dark Mode Switch</h2>
<button id="toggle">Toggle dark mode</button>
<script>
document.getElementById("toggle").addEventListener("click", () => {
document.body.classList.toggle("dark");
});
</script>
</body>
</html>Creating and Removing Elements
document.createElement() makes a new element, and append() puts it on the page. remove() deletes an element.
Example
<!DOCTYPE html>
<html>
<body>
<h2>Shopping List</h2>
<input id="item" placeholder="e.g. Milk">
<button id="add">Add</button>
<ul id="list"></ul>
<script>
document.getElementById("add").addEventListener("click", () => {
const input = document.getElementById("item");
if (input.value.trim() === "") return;
const li = document.createElement("li");
li.textContent = input.value + " ";
const del = document.createElement("button");
del.textContent = "x";
del.addEventListener("click", () => li.remove());
li.append(del);
document.getElementById("list").append(li);
input.value = "";
});
</script>
</body>
</html>Moving Around the Tree
Every element knows its family:
element.parentElementis the element around itelement.childrenis a list of the elements inside itelement.nextElementSiblingis the next element at the same level
Use textContent, not innerHTML, for anything a user typed. If a user types HTML or a script, innerHTML would run it, which is a security risk.
Exercise
Exercise
Which method finds the first element on the page that matches the CSS selector ".card"?