💡Part 10: DOM Interview Questions and Answers – From Basics to Advanced

✅ 1. What is the DOM in JavaScript?

Answer:
DOM stands for Document Object Model. It is a programming interface that allows JavaScript to interact with HTML and CSS of a webpage. Think of the DOM as a tree-like structure where each HTML element is a node.

📌 Real-Life Example:
Imagine a house. Each room, door, and window is an HTML element. The DOM is the blueprint that lets you access and change those parts dynamically using JavaScript.

---

✅ 2. What are DOM nodes and types of nodes?

Answer:
A DOM node is anything in the HTML document — like an element, text, or comment.

👨‍🏫 Common node types:

---

✅ 3. How can you access HTML elements using DOM?

Answer:
You can access elements using:

• getElementById()

• getElementsByClassName()

• getElementsByTagName()

• querySelector() / querySelectorAll()

📌 Example:

document.getElementById("myDiv");
document.querySelector(".menu");

✍️ Explanation: These methods return the elements so you can read or change their content/styles.

---

✅ 4. What is getElementById()?

Answer:
It returns the element that has the specific id. It’s the fastest way to access a single element.

📌 Example:

const heading = document.getElementById("mainHeading");
heading.style.color = "blue";

---

✅ 5. What’s the difference between querySelector() and getElementById()?

Answer:

---

✅ 6. What is innerText vs innerHTML?

Answer:

📌 Example:

element.innerText = "Hello"; // just text
element.innerHTML = "<b>Hello</b>"; // bolded text

---

✅ 7. How do you change an element’s CSS using JavaScript?

Answer:
You can use the .style property.

📌 Example:

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

👀 Explanation: You can dynamically update styles like color, size, margins, etc.

---

✅ 8. How can you create a new element using DOM?

Answer:
You use document.createElement().

📌 Example:

const para = document.createElement("p");
para.innerText = "I am a new paragraph!";
document.body.appendChild(para);

---

✅ 9. What is appendChild() and how does it work?

Answer:
appendChild() adds a new child to a parent node.

👨‍🏫 Explanation: It’s used when dynamically inserting new HTML elements into the document.

---

✅ 10. How do you remove an element from the DOM?

Answer:
Use removeChild() or element.remove().

📌 Example:

const element = document.getElementById("toRemove");
element.remove(); // modern way

---

✅ 11. What are event listeners in DOM?

Answer:
Event listeners let you run code when something happens, like a click or hover.

📌 Example:

button.addEventListener("click", function() {
  alert("Button clicked!");
});

---

✅ 12. What is event.target in JavaScript?

Answer:
It tells you which element triggered the event.

📌 Example:

document.addEventListener("click", function(event) {
  console.log(event.target); // shows clicked element
});

---

✅ 13. What’s the difference between addEventListener and onclick?

---

✅ 14. What is event bubbling in the DOM?

Answer:
When an event occurs on a nested element, it bubbles up to parent elements.

📌 Example:
Clicking on a <span> inside a <div> triggers both the span and div click handlers.

---

✅ 15. How do you stop event bubbling?

Answer:
Use event.stopPropagation().

📌 Example:

element.addEventListener("click", function(event) {
  event.stopPropagation();
});

---

✅ 16. What is event delegation?

Answer:
Instead of attaching events to multiple child elements, attach it to a common parent.

📌 Use case: Efficient event handling on large lists.

---

✅ 17. How can you toggle a class in JavaScript?

Answer:
Use classList.toggle().

📌 Example:

element.classList.toggle("active");

---

✅ 18. What is the DOMContentLoaded event?

Answer:
It fires when the initial HTML document is fully loaded, without waiting for images or stylesheets.

📌 Use case: Initialize scripts when the DOM is ready.

---

✅ 19. Difference between window.onload and DOMContentLoaded?

---

✅ 20. What is setAttribute() in the DOM?

Answer:
It sets a new attribute on an element.

📌 Example:

element.setAttribute("class", "highlight");

---

✅ 21. What is textContent? How is it different from innerText?

---

✅ 22. How do you traverse DOM elements?

Answer:
Use these properties:

• parentNode

• childNodes

• nextSibling

• previousSibling

📌 Example:

element.parentNode;
element.firstChild;

---

✅ 23. What is the difference between children and childNodes?

---

✅ 24. What is the Shadow DOM?

Answer:
It’s a separate DOM tree for encapsulating styles and structure in Web Components.
It prevents your component’s CSS/HTML from leaking into the main DOM.

---

✅ 25. How do you clone a DOM element?

Answer:
Use cloneNode().

📌 Example:

const copy = element.cloneNode(true); // true = deep clone

---

✅ 26. What is a DocumentFragment?

Answer:
It’s a lightweight, invisible DOM structure used for performance-friendly bulk changes.

📌 Use case: Adding many elements without triggering multiple reflows.

---

✅ 27. How do you check if an element has a specific class?

Answer:
Use:

element.classList.contains("active");

---

✅ 28. How do you dynamically add/remove classes?

Answer:

element.classList.add("highlight");
element.classList.remove("highlight");

---

✅ 29. What is reflow and repaint in DOM?

Answer:

👨‍💻 Performance Tip: Avoid changing styles too frequently.

---

✅ 30. Can we access elements inside an iframe using DOM?

Answer:
Only if the iframe is same-origin.
Use:

iframe.contentWindow.document.getElementById("insideIframe");

---

✅ Conclusion:
This part covered 30 powerful, real-life DOM interview questions — from the basics like getElementById() to advanced like Shadow DOM and performance optimizations. Each answer is structured to help you explain confidently in an interview — even if you forget under pressure.

---

🔔 Stay Connected

If you found this article helpful and want to receive more such beginner-friendly and industry-relevant Interviews related notes, tutorials, and project ideas — 📩 Subscribe to our newsletter by entering your email below.

And if you're someone who wants to prepare for tech interviews while having a little fun and entertainment, 🎥 Don’t forget to subscribe to my YouTube channel – Knowledge Factory 22 – for regular content on tech concepts, career tips, and coding insights!

Stay curious. Keep building. 🚀