DOM Manipulation

// By ID
let heading = document.getElementById("main-heading");

// By class (first match)
let btn = document.querySelector(".submit-btn");

// By tag
let paragraphs = document.querySelectorAll("p");

// By CSS selector (powerful!)
let activeLink = document.querySelector("nav a.active");

// console.log to see
console.log(heading);

let heading = document.getElementById("title");

// Text change
heading.textContent = "New Heading!";

// HTML change (careful with XSS)
heading.innerHTML = "Hello <span>World</span>";

// Style change
heading.style.color = "red";
heading.style.fontSize = "32px";
heading.style.backgroundColor = "var(--primary)";

// CSS classes
heading.classList.add("highlight");
heading.classList.remove("old-class");
heading.classList.toggle("active");
heading.classList.contains("highlight"); // true/false

// Attributes
let img = document.querySelector("img");
img.setAttribute("src", "new-image.jpg");
img.getAttribute("alt");

// New element create karo
let newPara = document.createElement("p");
newPara.textContent = "New paragraph!";
newPara.classList.add("my-para");

// DOM mein add karo
document.body.appendChild(newPara);

// kisi element ke andar add karo
let container = document.getElementById("container");
container.appendChild(newPara);

// Pehle insert karo
container.prepend(newPara);

// Remove karo
newPara.remove();