DOM Manipulation

Getting Started

Table of Content

The Document Object Model (DOM) is a representation of an HTML document that JavaScript can manipulate dynamically. Using JavaScript, developers can access, modify, and update HTML elements and styles in real time.

Accessing DOM Elements

JavaScript provides several methods to select elements from the DOM.

Using `getElementById` (Select by ID)

Returns a single element matching the specified id.

let heading = document.getElementById("main-title");
console.log(heading.textContent);

let heading = document.getElementById("main-title");
console.log(heading.textContent);

let heading = document.getElementById("main-title");
console.log(heading.textContent);

Using `getElementsByClassName` (Select by Class)

Returns a collection (HTMLCollection) of elements that match the class name.

let items = document.getElementsByClassName("list-item");
console.log(items[0].textContent);

let items = document.getElementsByClassName("list-item");
console.log(items[0].textContent);

let items = document.getElementsByClassName("list-item");
console.log(items[0].textContent);

Using `getElementsByTagName` (Select by Tag)

Returns a collection of elements matching the tag name.

let paragraphs = document.getElementsByTagName("p");
console.log(paragraphs.length);

let paragraphs = document.getElementsByTagName("p");
console.log(paragraphs.length);

let paragraphs = document.getElementsByTagName("p");
console.log(paragraphs.length);

Using `querySelector` (Select First Match)

Returns the first matching element based on a CSS selector.

let firstItem = document.querySelector(".list-item");
console.log(firstItem.textContent);

let firstItem = document.querySelector(".list-item");
console.log(firstItem.textContent);

let firstItem = document.querySelector(".list-item");
console.log(firstItem.textContent);

Using `querySelectorAll` (Select All Matches)

Returns a NodeList of elements that match a CSS selector.

let allItems = document.querySelectorAll(".list-item");
allItems.forEach(item => console.log(item.textContent));

let allItems = document.querySelectorAll(".list-item");
allItems.forEach(item => console.log(item.textContent));

let allItems = document.querySelectorAll(".list-item");
allItems.forEach(item => console.log(item.textContent));

Modifying DOM Elements

Changing Text Content

The textContent and innerHTML properties allow updating element content.

let title = document.getElementById("main-title");
title.textContent = "Updated Title";

let title = document.getElementById("main-title");
title.textContent = "Updated Title";

let title = document.getElementById("main-title");
title.textContent = "Updated Title";

innerHTML allows inserting HTML inside an element.

let container = document.getElementById("content");
container.innerHTML = "<p>New paragraph added!</p>";

let container = document.getElementById("content");
container.innerHTML = "<p>New paragraph added!</p>";

let container = document.getElementById("content");
container.innerHTML = "<p>New paragraph added!</p>";

Changing Attributes

The setAttribute and getAttribute methods modify element attributes.

let link = document.querySelector("a");
link.setAttribute("href", "https://www.example.com");
console.log(link.getAttribute("href"));

let link = document.querySelector("a");
link.setAttribute("href", "https://www.example.com");
console.log(link.getAttribute("href"));

let link = document.querySelector("a");
link.setAttribute("href", "https://www.example.com");
console.log(link.getAttribute("href"));

Removing an attribute:

<script>link.removeAttribute("target");</script>

<script>link.removeAttribute("target");</script>

<script>link.removeAttribute("target");</script>

Modifying Styles

The style property allows modifying CSS properties directly.

let box = document.getElementById("box");
box.style.backgroundColor = "blue";
box.style.color = "white";
box.style.padding = "10px";

let box = document.getElementById("box");
box.style.backgroundColor = "blue";
box.style.color = "white";
box.style.padding = "10px";

let box = document.getElementById("box");
box.style.backgroundColor = "blue";
box.style.color = "white";
box.style.padding = "10px";

Adding or removing a CSS class:

box.classList.add("highlight");
box.classList.remove("highlight");

box.classList.add("highlight");
box.classList.remove("highlight");

box.classList.add("highlight");
box.classList.remove("highlight");

Creating and Removing Elements

Creating New Elements

Use document.createElement() to generate new HTML elements dynamically.

let newParagraph = document.createElement("p");
newParagraph.textContent = "This is a new paragraph.";
document.body.appendChild(newParagraph);

let newParagraph = document.createElement("p");
newParagraph.textContent = "This is a new paragraph.";
document.body.appendChild(newParagraph);

let newParagraph = document.createElement("p");
newParagraph.textContent = "This is a new paragraph.";
document.body.appendChild(newParagraph);

Removing Elements

Use remove() to delete an element.

let unwantedElement = document.getElementById("old-item");
unwantedElement.remove();

let unwantedElement = document.getElementById("old-item");
unwantedElement.remove();

let unwantedElement = document.getElementById("old-item");
unwantedElement.remove();

Removing a child element:

let parent = document.getElementById("list");
let child = document.getElementById("list-item");
parent.removeChild(child);

let parent = document.getElementById("list");
let child = document.getElementById("list-item");
parent.removeChild(child);

let parent = document.getElementById("list");
let child = document.getElementById("list-item");
parent.removeChild(child);

Handling Events in JavaScript

Adding Event Listeners

The addEventListener() method attaches event handlers to elements.

let button = document.getElementById("btn");
button.addEventListener("click", () => {
  alert("Button clicked!");
});

let button = document.getElementById("btn");
button.addEventListener("click", () => {
  alert("Button clicked!");
});

let button = document.getElementById("btn");
button.addEventListener("click", () => {
  alert("Button clicked!");
});

Common Event Types

click – When an element is clicked.
mouseover – When the mouse hovers over an element.
keydown – When a key is pressed.
submit – When a form is submitted.

Example:

let inputField = document.getElementById("input-box");
inputField.addEventListener("keydown", event => {
  console.log("Key pressed:", event.key);
});

let inputField = document.getElementById("input-box");
inputField.addEventListener("keydown", event => {
  console.log("Key pressed:", event.key);
});

let inputField = document.getElementById("input-box");
inputField.addEventListener("keydown", event => {
  console.log("Key pressed:", event.key);
});

Removing Event Listeners

Use removeEventListener() to detach event handlers.

function sayHello() {
  console.log("Hello!");
}
  
button.addEventListener("click", sayHello);
button.removeEventListener("click", sayHello);

function sayHello() {
  console.log("Hello!");
}
  
button.addEventListener("click", sayHello);
button.removeEventListener("click", sayHello);

function sayHello() {
  console.log("Hello!");
}
  
button.addEventListener("click", sayHello);
button.removeEventListener("click", sayHello);

Event Delegation

Instead of adding an event listener to multiple elements, use event delegation on a parent element.

document.getElementById("list").addEventListener("click", event => {
  if (event.target.tagName === "LI") {
    console.log("Item clicked:", event.target.textContent);
  }
});

document.getElementById("list").addEventListener("click", event => {
  if (event.target.tagName === "LI") {
    console.log("Item clicked:", event.target.textContent);
  }
});

document.getElementById("list").addEventListener("click", event => {
  if (event.target.tagName === "LI") {
    console.log("Item clicked:", event.target.textContent);
  }
});

Conclusion

DOM manipulation is essential for dynamic web applications. This section covered selecting, modifying, and interacting with elements. The next section will focus on event handling in depth, covering advanced techniques and best practices.

Still have questions?

Get in touch