The Document Object Model (DOM) is a programming interface for web documents. It represents the page so that programs can change the document structure, style, and content. The browser creates a DOM tree from your HTML, and JavaScript can interact with this tree.

1. Selecting Elements

Before you can manipulate an element, you need to select it.

• document.getElementById('id'): Selects a single element by its unique ID.
• document.querySelector('selector'): The most versatile method. It returns the first element that matches a specified CSS selector.
• document.querySelectorAll('selector'): Returns a NodeList (which is like an array) of all elements that match the selector.

Code Snippet: Selecting Elements

HTML

<div id="container">
    <h1 class="heading">Hello!</h1>
    <p>Click the button.</p>
    <button id="action-btn">Click Me</button>
</div>

JavaScript

const mainContainer = document.getElementById('container');
const heading = document.querySelector('.heading');
const button = document.querySelector('#action-btn');

2. Manipulating Elements

Once you have an element selected, you can change it.

• Changing Content: Use .textContent to change text content (safer) or .innerHTML to change the HTML content (use with caution).
• Changing Styles: Access the .style property. Note that property names are converted to camelCase (e.g., background-color becomes backgroundColor).
• Changing Attributes: Use .setAttribute() and .getAttribute().
• Managing Classes: Use the .classList property with methods like .add(), .remove(), and .toggle().

Code Snippet: Modifying the DOM

JavaScript

// Change the heading text
heading.textContent = 'Welcome to the DOM!';

// Change the button style
button.style.backgroundColor = 'blue';
button.style.color = 'white';

// Toggle a class
mainContainer.classList.add('dark-theme');

3. Handling Events

Events are actions that happen in the browser, like a user clicking a button, hovering over an element, or submitting a form. You can "listen" for these events and run a function when they occur.

The standard way to do this is with element.addEventListener().

Code Snippet: A Simple Click Event

JavaScript

button.addEventListener('click', () => {
  // This function runs every time the button is clicked
  heading.textContent = 'You clicked the button!';
  mainContainer.classList.toggle('dark-theme');
});

Event Delegation

What if you have 100 list items and you want to know which one was clicked? Adding an event listener to every single one is inefficient. Event delegation is the solution.

You place a single event listener on a parent element. Because events "bubble" up from the child element that was clicked to its parents, you can catch the event on the parent and use the event.target property to figure out which child was actually clicked.

Code Snippet: Event Delegation

HTML

<ul id="item-list">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

JavaScript

const itemList = document.getElementById('item-list');

itemList.addEventListener('click', (event) => {
    // Check if the clicked element was an LI
    if (event.target.tagName === 'LI') {
        console.log(`You clicked on: ${event.target.textContent}`);
    }
});