DOM Selection, QuerySelectors & Dynamic HTML Manipulation

The DOM (Document Object Model) is the browser's in-memory tree representation of the webpage.

document.querySelector('.class'): Selects the first matching element.

document.querySelectorAll('.class'): Selects all matching elements (NodeList).

document.getElementById('id'): Fast single-element lookup by ID.

⊞Code Example

const headline = document.querySelector("#headline");

const cards = document.querySelectorAll(".card");

⊞Code Example

// 1. Text & HTML content

headline.textContent = "Updated via JavaScript!";

// 2. Manipulating CSS classes

headline.classList.add("text-emerald-400");

headline.classList.remove("text-slate-500");

headline.classList.toggle("active");

// 3. Modifying attributes

const link = document.querySelector("a");

link.setAttribute("href", "https://nextsem.online");

link.setAttribute("target", "_blank");

The DOM (Document Object Model) is the browser's in-memory tree representation of the webpage.

document.querySelector('.class'): Selects the first matching element.

document.querySelectorAll('.class'): Selects all matching elements (NodeList).

document.getElementById('id'): Fast single-element lookup by ID.

⊞Code Example

const headline = document.querySelector("#headline");

const cards = document.querySelectorAll(".card");

⊞Code Example

// 1. Text & HTML content

headline.textContent = "Updated via JavaScript!";

// 2. Manipulating CSS classes

headline.classList.add("text-emerald-400");

headline.classList.remove("text-slate-500");

headline.classList.toggle("active");

// 3. Modifying attributes

const link = document.querySelector("a");

link.setAttribute("href", "https://nextsem.online");

link.setAttribute("target", "_blank");