π‘Part 10: DOM Interview Questions and Answers β From Basics to Advanced

Table of contents
- β 1. What is the DOM in JavaScript?
- β 2. What are DOM nodes and types of nodes?
- β 3. How can you access HTML elements using DOM?
- β 4. What is getElementById()?
- β 5. Whatβs the difference between querySelector() and getElementById()?
- β 6. What is innerText vs innerHTML?
- β 7. How do you change an elementβs CSS using JavaScript?
- β 8. How can you create a new element using DOM?
- β 9. What is appendChild() and how does it work?
- β 10. How do you remove an element from the DOM?
- β 11. What are event listeners in DOM?
- β 12. What is event.target in JavaScript?
- β 13. Whatβs the difference between addEventListener and onclick?
- β 14. What is event bubbling in the DOM?
- β 15. How do you stop event bubbling?
- β 16. What is event delegation?
- β 17. How can you toggle a class in JavaScript?
- β 18. What is the DOMContentLoaded event?
- β 19. Difference between window.onload and DOMContentLoaded?
- β 20. What is setAttribute() in the DOM?
- β 21. What is textContent? How is it different from innerText?
- β 22. How do you traverse DOM elements?
- β 23. What is the difference between children and childNodes?
- β 24. What is the Shadow DOM?
- β 25. How do you clone a DOM element?
- β 26. What is a DocumentFragment?
- β 27. How do you check if an element has a specific class?
- β 28. How do you dynamically add/remove classes?
- β 29. What is reflow and repaint in DOM?
- β 30. Can we access elements inside an iframe using DOM?
- π Stay Connected
β 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:
Node Type | Description |
Element Node | Represents HTML elements like <div> , <p> |
Text Node | Text inside an element or tag |
Comment Node | Represents comments (<!-- comment --> ) |
β 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:
getElementById() | querySelector() |
Only works with id | Works with any CSS selector |
Slightly faster | More flexible |
Returns a single item | Returns the first match |
β
6. What is innerText
vs innerHTML
?
Answer:
Property | Description |
innerText | Gets/sets the visible text only |
innerHTML | Gets/sets the HTML content (including tags) |
π 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
?
Feature | onclick | addEventListener() |
Overwrites others | Yes | No |
Multiple handlers | No | Yes |
Syntax | element.onclick = fn | element.addEventListener() |
β 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
?
Feature | window.onload | DOMContentLoaded |
When it fires | After everything loads | After DOM is ready |
Slower | Yes | No |
Use case | Wait for images, styles | Run scripts earlier |
β
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
?
Property | Description |
textContent | Gets all text (even hidden) |
innerText | Gets only visible text |
β 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
?
Property | Description |
children | Only HTML elements |
childNodes | Includes text, comment, etc. |
β 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:
Term | Meaning |
Reflow | Calculating layout after DOM change |
Repaint | Updating pixels (like color, visibility) |
π¨βπ» 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. π
Subscribe to my newsletter
Read articles from Payal Porwal directly inside your inbox. Subscribe to the newsletter, and don't miss out.
Written by

Payal Porwal
Payal Porwal
Hi there, tech enthusiasts! I'm a passionate Software Developer driven by a love for continuous learning and innovation. I thrive on exploring new tools and technologies, pushing boundaries, and finding creative solutions to complex problems. What You'll Find Here On my Hashnode blog, I share: π In-depth explorations of emerging technologies π‘ Practical tutorials and how-to guides π§Insights on software development best practices πReviews of the latest tools and frameworks π‘ Personal experiences from real-world projects. Join me as we bridge imagination and implementation in the tech world. Whether you're a seasoned pro or just starting out, there's always something new to discover! Letβs connect and grow together! π