10 Simple DOM Questions

1. What is the DOM in JavaScript?

Concept: Basics

Explain that DOM = Document Object Model
It represents HTML as a tree structure
JS uses it to interact with web pages

1. How do you select an element by ID?

Concept: getElementById()

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

1. How do you select elements by class name?

Concept: getElementsByClassName()

let items = document.getElementsByClassName("item");

1. What is the difference between querySelector() and querySelectorAll()?

Concept: Modern selectors

document.querySelector(".box"); // first match
document.querySelectorAll(".box"); // all matches

1. How do you change text inside an element?

Concept: innerText

document.getElementById("title").innerText = "Hello World";

1. How do you change HTML content?

Concept: innerHTML

document.getElementById("box").innerHTML = "Bold Text";

1. How do you change CSS styles using JavaScript?

Concept: style

document.getElementById("box").style.color = "red";

1. How do you add a click event to a button?

Concept: addEventListener()

document.getElementById("btn").addEventListener("click", function() {
alert("Button clicked!");
});

1. How do you create a new element and add it to the page?

Concept: createElement() & appendChild()

let newPara = document.createElement("p");
newPara.innerText = "New paragraph";
document.body.appendChild(newPara);

1. How do you remove an element from the DOM?

Concept: remove()

document.getElementById("box").remove();