JavaScript HTML DOM — Interview Questions & Answers

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:

Change HTML content and structure.
Modify CSS styles dynamically.
Add, remove, or listen to events.
Create interactive and responsive web pages.

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();

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 Node
Text Node
Comment Node
Document Node

Ques: What are DOM Collections and NodeLists?

HTMLCollection → live list (auto-updates).
NodeList → can be static or live depending on how it’s retrieved.

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?

Inline: <button onclick="alert('Hi')">Click</button>
Traditional: element.onclick = function(){}
Modern: 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:

Capturing Phase – from root to target
Bubbling Phase – from target back up to root

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?

jQuery (simplifies DOM handling)
React, Vue, and Angular (use Virtual DOM for efficiency)