JavaScript DOM Manipulation

ADVERTISEMENT

What is the DOM?

DOM stands for Document Object Model. It’s a tree-like structure representing all the elements of a web page.

Every HTML element (like <div>, <h1>, <p>) becomes a node in this tree. JavaScript uses the DOM to access and manipulate these elements dynamically — allowing changes to content, styling, or structure in real time.

Example:

<p id="message">Hello!</p>

You can access and change this paragraph using JavaScript:

document.getElementById("message").textContent = "Hi there!";

getElementById

This method selects a single element by its unique id.

HTML:

<h1 id="title">Welcome</h1>

JavaScript:

let heading = document.getElementById("title");
heading.textContent = "Hello World!";

getElementsByClassName

Returns a collection of elements that share the same class. You can loop through them using for or for...of.

HTML:

<p class="note">Note 1</p>
<p class="note">Note 2</p>

JavaScript:

let notes = document.getElementsByClassName("note");

for (let note of notes) {
  note.style.color = "blue";
}

getElementsByName

Selects elements based on their name attribute — commonly used with form inputs.

HTML:

<input type="text" name="username" />

JavaScript:

let inputs = document.getElementsByName("username");

if (inputs.length > 0) {
  inputs[0].value = "JohnDoe";
}

Note: Unlike IDs, name attributes are not guaranteed to be unique.

getElementsByTagName

Selects elements by their tag name (like "div", "p", "span"), returning a collection.

HTML:

<p>Paragraph 1</p>
<p>Paragraph 2</p>

JavaScript:

let paragraphs = document.getElementsByTagName("p");

for (let p of paragraphs) {
  p.style.fontWeight = "bold";
}

innerHTML vs outerHTML

These properties are used to get or set the HTML content inside an element.

innerHTML

  • Returns or updates the contents inside an element.
<div id="box">Old content</div>

let box = document.getElementById("box");
box.innerHTML = "<strong>New content</strong>";

outerHTML

  • Returns or replaces the element itself, including its tags.
console.log(box.outerHTML);
// <div id="box"><strong>New content</strong></div>

box.outerHTML = "<section>Replaced</section>";

Important: Changing outerHTML actually removes the original element from the DOM.

The Document Object

document is the global object that represents the entire HTML page. It provides access to every node in the DOM.

Common usage includes:

document.title = "New Page Title";     // Change the tab title
document.body.style.background = "#f9f9f9"; // Change page background
document.URL;                          // Get current page URL

You can also use modern selectors:

  • document.querySelector() — selects the first matching element
  • document.querySelectorAll() — selects all matching elements

Example:

let firstButton = document.querySelector("button");
let allButtons = document.querySelectorAll(".btn");

These work just like CSS selectors (#id, .class, tag).

Summary

  • The DOM is the structure of the webpage that JavaScript can interact with.
  • Use getElementById, getElementsByClassName, getElementsByName, and getElementsByTagName to select HTML elements.
  • innerHTML changes the content inside an element; outerHTML replaces the whole element.
  • The document object gives full control over the HTML page.
  • For modern development, consider using querySelector() and querySelectorAll().

ADVERTISEMENT