DOM is an important programming interface for web documents. With the HTML DOM, JavaScript can access and change all the elements of an HTML document. The DOM provides a way for web pages to be interactive and dynamic. With the document object model, JavaScript gets all the power it needs to create dynamic HTML.

With various methods and properties of DOM we can select an element. For example: The most common way to access an HTML element is to use the id of the element with the getElementById method. The easiest way to get the content of an element is by using the innerHTML property. In spite of those, there are ways to select the element with className, tagName, CSS selector etc.

Event delegation allows us to attach a single event listener, to a parent element, that will fire for all descendants matching a selector, whether those descendants exist now or are added in the future. Event delegation refers to the process of using event propagation (bubbling) to handle events at a higher level in the DOM than the element on which the event originated. Event delegation increases efficiency, reduces the need to attach multiple event listeners to individual child elements, improving performance, especially with dynamic or large lists of elements.

It is simple. We can manipulate an element's attributes and styles by getting an attributes using a method that retrieves it by its name, setting an attribute by specifying the attribute name and its value. We can remove an attribute using a method that takes the attribute name as a parameter.