DOM Manipulation in JavaScript

DOM (Document Object Model) Manipulation in JavaScript refers to modifying HTML elements dynamically using JavaScript. This includes selecting, modifying, adding, or removing elements from the webpage.

Selecting Elements in the DOM

Before modifying elements, we need to select them. Here are the different ways:

Examples of Selection Methods

1. Selecting an Element by ID

let title = document.getElementById("main-title");
console.log(title.innerText); // Logs the text inside the element

2. Selecting Elements by Class Name

let items = document.getElementsByClassName("item");
console.log(items[0].innerText); // Logs the first element's text

3. Selecting Elements by Tag Name

let paragraphs = document.getElementsByTagName("p");
console.log(paragraphs.length); // Logs the number of <p> elements

4. Selecting an Element Using querySelector()

Returns only the first matching element.

let firstItem = document.querySelector(".item"); // Selects the first `.item`
console.log(firstItem.innerText);

5. Selecting Multiple Elements Using querySelectorAll()

Returns a NodeList, supports .forEach().

let allItems = document.querySelectorAll(".item"); // Selects all `.item`
allItems.forEach((item) => console.log(item.innerText));

innerHTML vs innerText vs textContent in JavaScript

1. innerHTML

✅ Gets or sets the HTML content (including tags) inside an element.
✅ Parses and renders HTML if assigned.
❌ Can expose security risks (XSS attacks) if inserting user input.

let h1 = document.querySelector("h1");

h1.innerHTML += " <i>hello</i>";

2. innerText

✅ Gets or sets only the visible text inside an element.
✅ Ignores hidden elements (like display: none;).
❌ Does not retain HTML tags.

let h1 = document.querySelector("h1");

h1.innerText += "Hack the Planat";

3. textContent

✅ Gets or sets all text (including hidden text) inside an element.
✅ Preserves whitespace and hidden elements (e.g., display: none;).
❌ Does not interpret HTML tags.

let h1 = document.querySelector("h1");

h1.textContent += "  Hack the Planat";

Key Differences Between innerHTML, innerText, and textContent

Manipulating Styles & Classes in JavaScript

JavaScript allows us to dynamically change the styles and classes of HTML elements using:

• element.style – for inline styles
• element.classList – for adding, removing, toggling, and checking classes

1. element.style (Manipulating Inline Styles)

✅ Modifies individual CSS properties directly
✅ Only applies inline styles, does NOT affect CSS classes
❌ Does not allow setting multiple styles at once using a string

<div id="box" style="width: 100px; height: 100px; background: red;"></div>
<button onclick="changeStyle()">Change Style</button>

<script>
    function changeStyle() {
        let box = document.getElementById("box");
        box.style.backgroundColor = "blue";  // Change background color
        box.style.width = "200px";           // Change width
        box.style.height = "200px";          // Change height
    }
</script>

✅ Before Clicking: Red box (100x100)
✅ After Clicking: Blue box (200x200)

2. element.classList (Manipulating Classes)

✅ Adds, removes, toggles, and checks classes efficiently
✅ Does NOT override existing styles like style does

Methods of classList

<style>
    .box { width: 100px; height: 100px; background: red; }
    .big { width: 200px; height: 200px; }
    .blue { background: blue; }
</style>

<div id="box" class="box"></div>
<button onclick="toggleSize()">Toggle Size</button>
<button onclick="toggleColor()">Toggle Color</button>

<script>
    let box = document.getElementById("box");

    function toggleSize() {
        box.classList.toggle("big"); // Toggles between small and big size
    }

    function toggleColor() {
        box.classList.toggle("blue"); // Toggles background color
    }
</script>

Creating and Deleting Elements in JavaScript DOM Manipulation

Once you’ve selected elements in the DOM, the next step in DOM manipulation is creating new elements and removing existing ones dynamically.

• document.createElement(tagName) → Creates a new element
• parent.appendChild(childElement) → Adds an element inside another element
• parent.removeChild(childElement) → Removes a child element from its parent

Creating Elements – document.createElement()

✅ Creates a new element in memory (not yet visible in the DOM).
✅ You can set attributes, styles, and inner content before adding it to the DOM.
❌ Must be appended manually to be visible in the DOM.

const newDiv = document.createElement('div'); // Creates a <div> element
newDiv.textContent = "Hello, this is a new div!"; // Adds text inside the div
newDiv.classList.add('new-class'); // Adds a class to the div
console.log(newDiv); // Logs the newly created <div>

Appending Elements – appendChild()

✅ Inserts a new child element inside a parent. ✅ Moves elements if they already exist (won’t duplicate them).

const parent = document.getElementById('container'); // Select an existing parent element
parent.appendChild(newDiv); // Adds the new div inside the parent element

insertBefore() – Insert Before a Specific Element

Inserts a new element before an existing child element.

const firstChild = parent.firstElementChild; // Get the first child of the parent
parent.insertBefore(newDiv, firstChild); // Insert newDiv before the first child

Removing Elements – removeChild()

✅ Deletes a child element from its parent.
❌ If the element does not exist inside the parent, it throws an error.

parent.removeChild(firstChild); // Removes the first child from the parent

Removing an Element Directly (remove())

Instead of removeChild(), you can use element.remove() (modern method).

newDiv.remove(); // Removes the newly created <div>

Summary

What is addEventListener()

An event listener is a method that allows you to wait for a specific event (like a click, keypress, hover, etc.) and run a function when the event occurs.

element.addEventListener(event, function, useCapture);

Basic Example: Click Event

<button id="myBtn">Click Me</button>

<script>
    document.getElementById("myBtn").addEventListener("click", function() {
        alert("Button Clicked!");
    });
</script>

Removing an Event Listener with removeEventListener()

To remove an event, you must use a named function.

<button id="myBtn">Click Me</button>
<button id="remove">Remove Event</button>

<script>
    function showAlert() {
        alert("Button Clicked!");
    }

    let btn = document.getElementById("myBtn");
    btn.addEventListener("click", showAlert);

    document.getElementById("remove").addEventListener("click", function() {
        btn.removeEventListener("click", showAlert); // Removes event
    });
</script>

Event Object (event)

Every event passes an event object (e) that gives details about the event.

<button id="btn">Click Me</button>

<script>
    document.getElementById("btn").addEventListener("click", function(event) {
        console.log("Event Type:", event.type);
        console.log("Clicked Element:", event.target);
        console.log("Mouse Coordinates:", event.clientX, event.clientY);
    });
</script>

JavaScript Events – Cheat Sheet