Author
Ques: What is the DOM in JavaScript?
Ans: The DOM (Document Object Model) represents the structure of an HTML or XML document as a tree of objects.
JavaScript can access, modify, and manipulate these objects to dynamically update the web page.
Example:
document.getElementById("demo").innerHTML = "Hello DOM!";
Ques: What is the purpose of the DOM?
Ans: The DOM allows JavaScript to:
Ques: How do you access HTML elements in the DOM?
Ans: JavaScript provides several methods to access elements:
document.getElementById("id");
document.getElementsByClassName("class");
document.getElementsByTagName("tag");
document.querySelector("selector");
document.querySelectorAll("selector");
Ques: What is the difference between getElementById() and querySelector()?
getElementById() returns a single element by its ID.querySelector() returns the first matching element using CSS selectors.Example:
document.getElementById("title");
document.querySelector("#title");
Ques: What is innerHTML and how is it used?
Ans: innerHTML is a property used to get or set the HTML content inside an element.
document.getElementById("demo").innerHTML = "<b>Hello</b>";
Ques: What is the difference between innerHTML and textContent?
innerHTML → includes HTML tags.textContent → returns only text, ignoring HTML tags.Example:
element.innerHTML = "<b>Hello</b>"; // shows bold text
element.textContent = "<b>Hello</b>"; // shows raw <b>Hello</b>
Ques: How do you modify form values using the DOM?
Ans: You can access and modify form elements by ID or name:
document.getElementById("myInput").value = "Updated Value";
Ques: How can you change CSS styles using JavaScript?
Ans: You can modify inline styles:
document.getElementById("box").style.backgroundColor = "blue";
Or toggle classes:
document.getElementById("box").classList.add("active");
Ques: What are classList methods in DOM?
Ans: Useful for adding/removing/toggling CSS classes dynamically.
element.classList.add("newClass");
element.classList.remove("oldClass");
element.classList.toggle("active");
Ques: How can you create and append elements dynamically?
Ans: Use createElement() and appendChild():
const newDiv = document.createElement("div");
newDiv.textContent = "Hello World!";
document.body.appendChild(newDiv);
Ques: How can you remove an element from the DOM?
Ans: You can use:
element.remove();
or
parent.removeChild(child);
Ques: What is a DOM Node?
Ans: A node represents every item in the DOM tree — elements, text, comments, etc.
Types include:
Element NodeText NodeComment NodeDocument NodeQues: What are DOM Collections and NodeLists?
Example:
document.getElementsByTagName("p"); // HTMLCollection
document.querySelectorAll("p"); // static NodeList
Ques: What is DOM Navigation?
Ans: DOM navigation allows moving between elements:
element.parentNode
element.childNodes
element.firstChild
element.lastChild
element.nextSibling
element.previousSibling
Ques: What is Event Handling in the DOM?
Ans: Event handling allows responding to user actions like clicks or keypresses.
Example:
document.getElementById("btn").onclick = function() {
alert("Button clicked!");
};
Ques: What is the difference between inline, traditional, and modern event handling?
<button onclick="alert('Hi')">Click</button>element.onclick = function(){}element.addEventListener("click", function(){})Ques: What is addEventListener() and why is it preferred?
Ans: addEventListener() allows attaching multiple event handlers without overwriting previous ones.
element.addEventListener("click", myFunction);
Ques: What is Event Bubbling and Capturing?
Ans: When an event occurs, it moves through the DOM in two phases:
Example:
element.addEventListener("click", handler, true); // capturing
element.addEventListener("click", handler, false); // bubbling
Ques: How do you stop event propagation?
Ans: Use:
event.stopPropagation();
Ques: How can you animate DOM elements with JavaScript?
Ans: You can use setInterval() or requestAnimationFrame() to update styles repeatedly.
let pos = 0;
const box = document.getElementById("box");
function move() {
pos++;
box.style.left = pos + "px";
if (pos < 100) requestAnimationFrame(move);
}
move();
Ques: What is document.readyState used for?
Ans: Checks if the DOM is loaded and ready.
if (document.readyState === "complete") {
console.log("DOM fully loaded!");
}
Ques: What is the difference between window.onload and DOMContentLoaded?
window.onload → waits for entire page (including images) to load.DOMContentLoaded → fires when HTML DOM is ready.Ques: How can you traverse children in the DOM?
element.children // HTMLCollection of child elements
element.childNodes // includes text and comment nodes
Ques: How can you clone a DOM element?
Ans: Use cloneNode():
const copy = element.cloneNode(true);
document.body.appendChild(copy);
Ques: How can you dynamically change HTML attributes?
element.setAttribute("src", "newImage.png");
console.log(element.getAttribute("src"));
Ques: How can you check if an element exists in DOM?
if (document.getElementById("myDiv")) {
console.log("Element found");
}
Ques: What is document.createTextNode() used for?
Ans: Creates a text node manually.
const text = document.createTextNode("Hello!");
element.appendChild(text);
Ques: How to get or change an element’s HTML tag dynamically?
Ans: You can replace an element using outerHTML:
element.outerHTML = "<section>New Tag</section>";
Ques: How can you handle form submissions using the DOM?
form.addEventListener("submit", (e) => {
e.preventDefault();
console.log("Form submitted!");
});
Ques: What are some common DOM manipulation libraries?