MCA
DOM MANIPULATION // MASTER THE CONCEPTS // WRITE BRUTAL CODE // DOM MANIPULATION // MASTER THE CONCEPTS // WRITE BRUTAL CODE //
BACK TO SYLLABUS
MEDIUM

DOM MANIPULATION

Selecting elements, events, and dynamic content

CONCEPTS

01Selecting elements (querySelector, getElementById)
02Modifying classes and attributes
03Creating and appending elements
04Event listeners (addEventListener)
05Event delegation
06DOM Traversal

SYNTAX_DEMO

Interacting with HTML
// Selecting an element
const btn = document.querySelector("#my-button");

// Event Listener
btn.addEventListener("click", (e) => {
  // Creating a new element
  const p = document.createElement("p");
  p.textContent = "Button was clicked!";
  p.classList.add("text-bold");
  
  // Appending to DOM
  document.body.appendChild(p);
});