DEV Community

Dharan Ganesan
Dharan Ganesan

Posted on

Day 66: Document Object Model

What is the DOM? πŸ“œ

The Document Object Model represents the structure of an HTML document in a tree-like form. In simpler terms, it's a programming interface for web documents, allowing programs (usually JavaScript) to interact with the web page's content. Each element in an HTML document, such as headings, paragraphs, images, forms, and more, becomes a part of this tree.

🌳 The DOM tree hierarchy often starts with the "document" object at the root, branching out into the HTML, head, and body elements, further subdividing into other elements. Consider the following example:

<!DOCTYPE html>
<html>
  <head>
    <title>My Web Page</title>
  </head>
  <body>
    <h1>Hello, World!</h1>
    <p>Welcome to my website.</p>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

Here, the DOM tree would look like this:

- Document
  - HTML
    - Head
      - Title
        - "My Web Page"
    - Body
      - H1 (Element)
        - "Hello, World!"
      - P (Element)
        - "Welcome to my website."
      - Text (Node)
      - Event Object
Enter fullscreen mode Exit fullscreen mode

DOM and JavaScript πŸš€

JavaScript is the primary language used to interact with the DOM. It provides a way to access, manipulate, and modify the content and structure of a web page. To access the DOM from JavaScript, developers utilize a set of powerful APIs (Application Programming Interfaces). Let's explore some common tasks in the context of JavaScript.

Fundamental Data Types and Their Usage 🧰

The DOM primarily deals with the following fundamental data types:

  1. Element: Represents an HTML element, such as a <div> or an <a>.

  2. Node: A generic term for any object in the DOM. Elements, attributes, text within elements, comments, and document itself are all types of nodes.

  3. Attribute: Represents the properties of an element.

  4. Text: Represents the textual content within an element.

  5. Document: The top-level object representing the web page itself.

These data types allow you to interact with the web page's structure and content efficiently.

DOM Interfaces πŸ‘₯

The DOM provides various interfaces, each tailored for specific tasks. These interfaces expose methods and properties that enable you to interact with the DOM.

  1. Document Object: Represents the web page itself and is often the entry point for DOM manipulation.

  2. Element Object: Represents an HTML element and provides access to its attributes and methods.

  3. Node Object: Represents a generic node in the DOM, allowing you to manipulate elements and their content.

  4. Event Object: Provides information about events (e.g., mouse clicks, key presses) on the page and enables event handling.

DOM Element Usage Properties/Methods
Element <div>, <p>, <a> innerHTML, innerText, appendChild
Node Element, Attribute, Text, Comment, Document parentNode, childNodes, nextSibling
Attribute id, class, src getAttribute(), setAttribute(), removeAttribute()
Text Text within an HTML element nodeValue, textContent
Document Represents the entire HTML document createElement(), getElementById(), querySelector()

Accessing the DOM πŸ”

To access a specific element in the DOM, you can use the document object along with various methods. Here's how you can select the <h1> element from our previous example:

const heading = document.querySelector('h1');
Enter fullscreen mode Exit fullscreen mode

You can also access elements by their id or class attributes:

const elementById = document.getElementById('myElementId');
const elementsByClass = document.getElementsByClassName('myElementClass');
Enter fullscreen mode Exit fullscreen mode

Traversing the DOM πŸšΆβ€β™‚οΈ

Traversing the DOM means navigating from one element to another. JavaScript provides several methods to move around the DOM tree.

Parent Node:

const paragraph = document.querySelector('p');
const parentElement = paragraph.parentNode;
Enter fullscreen mode Exit fullscreen mode

Child Node:

const body = document.body;
const children = body.children;
Enter fullscreen mode Exit fullscreen mode

Siblings:

const h1 = document.querySelector('h1');
const nextElement = h1.nextElementSibling;
const prevElement = h1.previousElementSibling;
Enter fullscreen mode Exit fullscreen mode

Finding Elements:

const container = document.querySelector('.container');
const listItem = container.querySelector('li');
Enter fullscreen mode Exit fullscreen mode

Examples 🌟

Let's put our knowledge to use with some examples:

Changing Text Content

const paragraph = document.querySelector('p');
paragraph.textContent = 'Welcome to the new text!';
Enter fullscreen mode Exit fullscreen mode

Adding Elements

const newDiv = document.createElement('div');
newDiv.textContent = 'I am a new div!';
document.body.appendChild(newDiv);
Enter fullscreen mode Exit fullscreen mode

Handling Events

const button = document.querySelector('button');
button.addEventListener('click', () => {
  alert('Button clicked!');
});
Enter fullscreen mode Exit fullscreen mode

Top comments (0)