Advanced DOM Interview Questions

1. What is the DOM?

Answer:
DOM (Document Object Model) is a tree-like representation of an HTML document that allows JavaScript to access and manipulate elements dynamically.

2. Difference between innerHTML and textContent**?**

Answer:

• innerHTML → parses HTML tags
• textContent → returns plain text (safer, faster)

3. Difference between querySelector and getElementById**?**

Answer:

• getElementById → faster, selects by ID only
• querySelector → flexible, uses CSS selectors

4. What is Event Bubbling?

Answer:
Event flows from child → parent in the DOM tree.

5. What is Event Capturing?

Answer:
Event flows from parent → child (opposite of bubbling).

6. What is Event Delegation?

Answer:
Handling events at a parent level instead of multiple child elements using event bubbling.

7. What is the Event Object?

Answer:
An object automatically passed to event handlers containing details like target, type, key, etc.

8. Difference between addEventListener and onclick**?**

Answer:

• addEventListener → allows multiple handlers
• onclick → only one handler

9. What is this in an event listener?

Answer:
Refers to the element that triggered the event.

10. Difference between HTMLCollection and NodeList**?**

Answer:

• HTMLCollection → live collection
• NodeList → static (from querySelectorAll)

11. What is createElement**()****?**

Answer:
Used to create a new HTML element dynamically.

12. Difference between appendChild and append**?**

Answer:

• appendChild → adds only nodes
• append → can add text + multiple nodes

13. What is remove() vs removeChild()****?

Answer:

• remove() → removes element directly
• removeChild() → removes via parent

14. What is classList**?**

Answer:
Used to add, remove, toggle CSS classes.

15. Difference between parentNode and parentElement**?**

Answer:

• parentNode → any node
• parentElement → only element nodes

16. What is the closest**()** method?

Answer:
Finds the nearest ancestor matching a selector.

17. What is preventDefault**()****?**

Answer:
Stops default browser behavior (like form submission).

18. What is stopPropagation**()****?**

Answer:
Stops events from bubbling up the DOM.

19. Difference between display**: none** and visibility: hidden**?**

Answer:

• display**: none** → removes element from layout
• visibility: hidden → hides but keeps space

20. What is a DOMContentLoaded event?

Answer:
Fires when HTML is fully loaded (before images/styles).