DOM API

The Document Object Model (DOM) is a crucial component of the Web API. It represents an HTML document as a tree structure of objects, providing a programmatic interface to interact with the document's content, structure, and style.

The DOM is composed of nodes, which can be elements (like <div>, <p>, etc.), text nodes, attributes, comments, and more.

Nodes are organized in a hierarchical structure, with the document element at the root.

Nodes have properties and methods that allow you to access and manipulate their content, attributes, and relationships with other nodes.

The DOM also enables event handling, allowing you to respond to user interactions (like clicks, key presses) and other events.

Selecting Elements

Remember css selector?

document.querySelectorAll('.my-class');
const element = document.querySelector('#myid);

Modifying Elements

element.innerHTML = "New content";
element.style.color = "red";
element.classList.add('active');

Creating Elements

const el = document.createElement('p');
el.textContent = "This is a paragraph";
document.body.appendChild(el);

Event Handling

el.addEventListener('click', () => {
  console.log('Element clicked');
});

MDN

Detailed documentation can be found on MDN.