πŸ’‘Part 10: DOM Interview Questions and Answers – From Basics to Advanced

Payal PorwalPayal Porwal
6 min read

Table of contents

βœ… 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 TypeDescription
Element NodeRepresents HTML elements like <div>, <p>
Text NodeText inside an element or tag
Comment NodeRepresents 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 idWorks with any CSS selector
Slightly fasterMore flexible
Returns a single itemReturns the first match

βœ… 6. What is innerText vs innerHTML?

Answer:

PropertyDescription
innerTextGets/sets the visible text only
innerHTMLGets/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?

FeatureonclickaddEventListener()
Overwrites othersYesNo
Multiple handlersNoYes
Syntaxelement.onclick = fnelement.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?

Featurewindow.onloadDOMContentLoaded
When it firesAfter everything loadsAfter DOM is ready
SlowerYesNo
Use caseWait for images, stylesRun 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?

PropertyDescription
textContentGets all text (even hidden)
innerTextGets 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?

PropertyDescription
childrenOnly HTML elements
childNodesIncludes 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:

TermMeaning
ReflowCalculating layout after DOM change
RepaintUpdating 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. πŸš€

0
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! 🌟