Dom Interview Questions

The DOM is a programming interface for web documents that represents the page as a tree structure of nodes, allowing scripts to update the content, structure, and style of a document. JavaScript can be used to manipulate the DOM by selecting elements, modifying attributes, and reacting to user events.

You can select DOM elements using methods like `document.getElementById()`, `document.getElementsByClassName()`, `document.getElementsByTagName()`, `document.querySelector()`, and `document.querySelectorAll()`. Each method offers different ways to target specific elements or groups of elements within the DOM.

You can handle events using the `addEventListener()` method, which attaches an event handler to an element. For example: `element.addEventListener('click', function() { console.log('Element clicked'); });`. Inline event handlers (e.g., `onclick`) can also be used, but `addEventListener()` is preferred as it allows for multiple handlers.

Event delegation is a technique where you attach a single event listener to a parent element rather than individual child elements. This leverages event bubbling (events moving up the DOM) to handle events on dynamically added elements. For example, a click listener on a parent container can handle clicks for its child elements.

You can create new DOM elements using `document.createElement()`, set their attributes using methods like `setAttribute()` or properties, and insert them into the document using methods like `appendChild()`, `insertBefore()`, or `innerHTML` for string-based insertion.