DOM Querying & Mutation

The Document Object Model (DOM) is a programming interface for web documents. It represents the page as a structured tree of nodes, allowing languages like JavaScript to dynamically read, change, add, or delete HTML elements and styles.

1. Selecting Elements (DOM Querying)

Before you can change a webpage element, you have to select it. Modern JavaScript relies primarily on two powerful selector methods:

• document.querySelector(selector): Returns the first element that matches the specified CSS selector.

const heading = document.querySelector('h1');
const mainBtn = document.querySelector('.btn-primary');
const emailInput = document.querySelector('#user-email');

• document.querySelectorAll(selector): Returns a static NodeList containing all elements matching the selector.

const items = document.querySelectorAll('.list-item');
// You can iterate over NodeLists directly:
items.forEach(item => console.log(item.textContent));

Older Selector Methods (Fast but Less Flexible):

• document.getElementById('id')
• document.getElementsByClassName('class') (Returns a live HTMLCollection, not a NodeList)

2. Modifying Content & Attributes (DOM Mutation)

A. Editing Text and HTML Content

• textContent: Returns or sets the plain text content of a node. Safe from Cross-Site Scripting (XSS).
• innerHTML: Returns or sets the HTML syntax inside an element.

const box = document.querySelector('.content-box');

box.textContent = "<strong>Hello</strong>"; // Renders literally as text: <strong>Hello</strong>
box.innerHTML = "<strong>Hello</strong>";   // Renders as bold text: Hello

Security Tip: Never set innerHTML directly using unfiltered user input, as it exposes your site to XSS attacks.

B. Modifying HTML Attributes

You can read and modify HTML attributes (like src, href, placeholder, disabled) dynamically:

• getAttribute(name): Gets the value.
• setAttribute(name, value): Sets the value.
• removeAttribute(name): Deletes the attribute.
• Direct Property Access: For standard attributes, you can write to them directly.

const img = document.querySelector('img');
img.setAttribute('src', 'assets/dog.jpg');
// Or directly:
img.src = 'assets/dog.jpg';

const input = document.querySelector('input');
input.disabled = true; // Disables the input box

3. Creating & Inserting Elements

You can build new elements entirely inside JavaScript and insert them into the DOM tree.

A. Creating Elements

• document.createElement(tagName): Creates an element node in memory.

const newParagraph = document.createElement('p');
newParagraph.textContent = "I am a new paragraph!";

B. Inserting Elements

Once created, you must attach the element to an existing parent node:

• appendChild(node): Appends a node as the last child.
• prepend(node): Prepends a node as the first child.
• before(node) / after(node): Places the node right before or after the target element.

const container = document.querySelector('.container');

const newDiv = document.createElement('div');
newDiv.textContent = "Appended Div";

container.appendChild(newDiv); // Inserts newDiv at the end of container

C. Removing Elements

• element.remove(): Deletes the element from the DOM directly.

const oldAlert = document.querySelector('.alert');
oldAlert.remove();

In the next guide, we will learn how to make elements interactive using the DOM event system and event delegation.