The Document Object Model (DOM)

The Document Object Model (DOM) is a programming interface for HTML and XML documents. It represents the page so that programs can change the document structure, style, and content. The DOM represents the document as a tree of objects, where each object represents a part of the document, such as an element, attribute, or text node.

Think of it as a blueprint or map of your HTML document, allowing JavaScript to interact with and modify it.

Introduction to the DOM

When a web page is loaded, the browser creates a DOM of the page. This DOM is what JavaScript uses to manipulate the page. The DOM is not the HTML code itself; it's a live representation of the HTML structure as an object tree. This object tree is made up of nodes.

Key Concepts:

• Document: The root node of the DOM tree. Represents the entire HTML document.
• Element: Represents HTML elements like `<div>`, `<p>`, `<h1>`, etc.
• Attribute: Represents HTML attributes like `id`, `class`, `src`, `href`, etc.
• Text: Represents the text content inside HTML elements.
• Node: The generic term for any item in the DOM tree (element, attribute, text, etc.).

Selecting Elements

Before you can manipulate elements, you need to select them using JavaScript. Here are common methods:

• `document.getElementById(id)`: Selects an element based on its `id` attribute. This is the fastest and most specific way to select a single element.
• `document.getElementsByClassName(className)`: Selects all elements with a specific `class` attribute. Returns an HTMLCollection (a live, array-like object).
• `document.getElementsByTagName(tagName)`: Selects all elements with a specific tag name (e.g., 'p', 'div', 'h1'). Returns an HTMLCollection.
• `document.querySelector(selector)`: Selects the *first* element that matches a CSS selector (e.g., '#myId', '.myClass', 'div > p').
• `document.querySelectorAll(selector)`: Selects *all* elements that match a CSS selector. Returns a NodeList (a static, array-like object).

Modifying Element Content

Once you've selected an element, you can modify its content. The most common properties for this are:

• `textContent` : Gets or sets the text content of an element, including whitespace. It replaces all child nodes of the element with a single text node. It is generally preferred over `innerText` because it's faster and more predictable.
• `innerHTML` : Gets or sets the HTML content of an element. This allows you to add or modify HTML tags within the element. Use with caution as it can be vulnerable to XSS (Cross-Site Scripting) attacks if the content comes from an untrusted source.

Manipulating Attributes

You can also manipulate element attributes using JavaScript.

• `element.getAttribute(attributeName)`: Gets the value of a specific attribute.
• `element.setAttribute(attributeName, attributeValue)`: Sets the value of a specific attribute.
• `element.removeAttribute(attributeName)`: Removes a specific attribute.
• `element.classList` : Provides methods for manipulating an element's CSS classes. Useful for adding, removing, or toggling classes. Methods include `add()`, `remove()`, `toggle()`, and `contains()`.

Change Image Source

Adding and Removing Elements

The DOM allows you to dynamically add and remove elements from the page.

• `document.createElement(tagName)`: Creates a new HTML element with the specified tag name (e.g., 'div', 'p', 'button').
• `element.appendChild(newElement)`: Appends the new element as the last child of the specified element.
• `element.insertBefore(newElement, referenceElement)`: Inserts the new element before the specified reference element (a child of the parent).
• `element.removeChild(childElement)`: Removes a child element from the parent.
• `element.remove()`: Removes the element itself from the DOM.