HTML

Question 1

What is the DOM

Answer 1

The DOM is a programming interface provided by web browsers that represents the structure of an HTML document as a tree-like structure of nodes. Each element, attribute, and text content in the document is represented as a node in the DOM. The DOM allows developers to interact with and manipulate the content, structure, and style of a web page dynamically using JavaScript or other scripting languages.

Question 2

How can you access and manipulate elements in the DOM using JavaScript?

Answer 2

You can access and manipulate elements in the DOM using various methods in JavaScript, including:

document.getElementById(id): Returns the element with the specified ID.
document.querySelector(selector): Returns the first element that matches the specified CSS selector.
document.querySelectorAll(selector): Returns a list of all elements that match the specified CSS selector.
element.innerHTML: Gets or sets the HTML content of an element.
element.textContent: Gets or sets the text content of an element.
element.setAttribute(name, value): Sets the value of an attribute of the element.
element.classList: Provides methods to add, remove, or toggle CSS classes of an element.

Question 3

What is event delegation in the context of the DOM?

Answer 3

Event delegation is a technique used to handle events efficiently in cases where there are multiple elements with similar behaviors. Instead of attaching event listeners to each individual element, you attach a single event listener to a common ancestor element. When an event occurs on one of the descendant elements, it “bubbles up” to the ancestor, and you can use event delegation to identify the specific target and handle the event appropriately. This approach reduces the number of event listeners and improves performance, especially for large and dynamically generated content.