Day 10–11 DOM Manipulation interview prep pack

1. What is the DOM, and how does the browser create it?
2. Difference between getElementById, getElementsByClassName, querySelector, and querySelectorAll.
3. Difference between innerText, textContent, and innerHTML.
4. What are event listeners? Why use addEventListener instead of inline handlers like onclick?
5. Explain == vs === with examples.
6. What is event bubbling? What is event capturing? How can you stop propagation?
7. Explain event delegation and why it’s useful.
8. What is the difference between target and currentTarget in event objects?
9. How do you dynamically create and append elements in the DOM?
10. What is the difference between removeChild and remove()?

Code Questions

1. Swap Text Between Two Elements

• Write code to swap the text of two <div> elements using getElementById.

  1. Live Character Counter

• Implement a live character counter for a text area. When typing, update a <span> showing the remaining characters (max 100).

  1. Color Changer

• Create three buttons: Red, Green, Blue. Clicking each should change the page’s background color using querySelector.

  1. Stop Event Propagation

• Create nested elements (parent and child divs). Add click listeners to both. Use stopPropagation() to prevent bubbling.

  1. Dynamic List Builder

• Build an unordered list where clicking a button adds a new list item dynamically.

🛠 Mini Project: Interactive To-Do List with Event Delegation

Features:

• Add tasks dynamically.
• Mark tasks as complete on click.
• Delete tasks using event delegation.
• Style completed tasks with a strike-through.