Drani Academy – Interview Question, Search Job, Tuitorials, Cheat Sheet, Project, eBook

Menu
Facebook-f Twitter Youtube

JavaScript

Tutorials – JavaScript


Chapter 9 – The DOM (Document Object Model)

 

The Document Object Model (DOM) is a fundamental concept in web development and JavaScript. It provides a structured representation of web documents, allowing you to interact with and manipulate the content, structure, and presentation of a webpage. In this chapter, we will delve into the world of the DOM, exploring its role, structure, and how to use JavaScript to interact with it.

What is the DOM?

The Document Object Model, often referred to as the DOM, is an interface that represents the structure and content of a web document, such as an HTML or XML page. It provides a programmatic way to access and manipulate the elements, attributes, and text within a document. Essentially, the DOM acts as a bridge between web content and programming languages like JavaScript.

The DOM represents a webpage as a tree of objects, where each object corresponds to a part of the page’s structure. This tree structure allows developers to traverse and manipulate the content of a webpage easily.

The key aspects of the DOM include:

  • Document: The top-level object representing the web document itself.
  • Elements: HTML elements (e.g., <div>, <p>) that make up the structure of the page.
  • Attributes: Properties associated with elements (e.g., class, id) that provide additional information.
  • Text: The text content within elements and attributes.

DOM Tree Structure

The DOM is structured as a tree, with the document object serving as the root. Each HTML element on the webpage is represented as a node in the tree. The relationship between nodes forms a parent-child hierarchy, reflecting the nesting of HTML elements.

Here’s a simplified representation of a DOM tree:

<!DOCTYPE html>
<html>
  <head>
    <title>Sample Page</title>
  </head>
  <body>
    <h1>Welcome to the DOM</h1>
    <p>This is a sample page.</p>
  </body>
</html>

In this example, the DOM tree structure would look like this:

  • document
    • html
      • head
        • title
          • Text node: “Sample Page”
      • body
        • h1
          • Text node: “Welcome to the DOM”
        • p
          • Text node: “This is a sample page”

Each element and text content is represented by a node in the tree, and they are organized based on their parent-child relationships.

Accessing the DOM

JavaScript provides a range of methods and properties to access and manipulate the DOM. You can use these tools to:

  • Access and modify elements and their attributes.
  • Add, delete, or modify content within elements.
  • Manipulate the structure of the page.

Accessing Elements

To access an element in the DOM, you can use methods like getElementById, getElementsByClassName, and getElementsByTagName. These methods return references to the corresponding elements, allowing you to interact with them using JavaScript.

Example: 

<div id="myDiv" class="container">
  <p>This is a paragraph.</p>
</div>
const elementById = document.getElementById("myDiv");
const elementsByClass = document.getElementsByClassName("container");
const elementsByTag = document.getElementsByTagName("p");

In this example, elementById will reference the <div> element with the id “myDiv,” elementsByClass will reference all elements with the class “container,” and elementsByTag will reference all <p> elements.

Query Selector

The querySelector and querySelectorAll methods provide more flexible and powerful ways to select elements using CSS-style selectors. querySelector returns the first element matching the selector, and querySelectorAll returns a list of all matching elements.

Example: 

<div class="container">
  <p>This is a paragraph.</p>
</div>
const element = document.querySelector(".container p"); // Select the <p> element within an element with class "container"
const elements = document.querySelectorAll(".container p"); // Select all <p> elements within elements with class "container"

Accessing Attributes and Content

You can access and modify element attributes and content using properties and methods. For example:

  • To get or set the text content of an element, use the textContent property.
  • To access an element’s attribute, use the getAttribute method.
  • To set an attribute’s value, use the setAttribute method.

Example: 

<a href="https://www.example.com" id="myLink">Visit Example</a>
const link = document.getElementById("myLink");
const text = link.textContent; // Get the text content: "Visit Example"
const href = link.getAttribute("href"); // Get the href attribute value: "https://www.example.com"
link.textContent = "Go to Example"; // Set new text content
link.setAttribute("href", "https://www.newexample.com"); // Set a new href value

Manipulating the DOM

You can modify the structure of the DOM by adding, removing, or replacing elements. The createElement, appendChild, removeChild, and replaceChild methods are commonly used for these purposes.

Example: 

<div id="myDiv">
  <p>This is a paragraph.</p>
</div>
const container = document.getElementById("myDiv");
const newElement = document.createElement("h2");
newElement.textContent = "New Heading";
container.appendChild(newElement); // Add the new heading as a child of "myDiv"
const oldElement = container.getElementsByTagName("p")[0];
container.removeChild(oldElement); // Remove the <p> element

In this example, a new <h2> element is created, added to the <div> as a child, and the old <p> element is removed.

Modifying Styles

JavaScript can be used to modify the style of elements in the DOM. You can access and change the style property of an element to adjust its appearance. This property allows you to control various CSS properties, such as color, backgroundColor, fontSize, and more.

Example: 

<div id="myDiv" style="background-color: lightblue;">
  <p>This is a paragraph.</p>
</div>
const container = document.getElementById("myDiv");
container.style.backgroundColor = "lightgreen";
container.style.fontSize = "20px";

In this example, JavaScript is used to change the background color and font size of the <div> element.

Event Handling

The DOM allows you to handle user interactions and events, such as clicks, mouse movements, and keyboard input. Event handling is a critical part of creating interactive web applications.

To respond to events, you can use event listeners, which are functions that are executed when a specified event occurs on an element. Common events include “click,” “mouseover,” “keydown,” and many more.

Example: 

<button id="myButton">Click Me</button>
const button = document.getElementById("myButton");
function handleClick() {
  alert("Button clicked!");
}
button.addEventListener("click", handleClick);

In this example, when the “Click Me” button is clicked, the handleClick function is executed, showing an alert. The addEventListener method is used to attach the event listener to the button.

Removing Event Listeners

You can remove event listeners using the removeEventListener method. This is particularly useful when you need to detach an event listener from an element, preventing it from being triggered.

Example: 

<button id="myButton">Click Me</button>
const button = document.getElementById("myButton");
function handleClick() {
  alert("Button clicked!");
}
button.addEventListener("click", handleClick);
// Later, to remove the event listener:
button.removeEventListener("click", handleClick);

In this example, the handleClick function is removed as an event listener from the button.

Traversing the DOM

Traversal involves moving from one element to another in the DOM tree. This can be useful when you need to access related or nested elements.

Navigating to Parent Elements

To move up the DOM tree to access parent elements, you can use the parentNode property.

Example: 

<div class="container">
  <p>This is a paragraph.</p>
</div>
const paragraph = document.querySelector(".container p");
const container = paragraph.parentNode;

In this example, the container variable references the parent <div> element of the paragraph.

Navigating to Child Elements

To access child elements of an element, you can use properties like children and methods like querySelector.

Example: 

<div class="container">
  <p>This is a paragraph.</p>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
  </ul>
</div>
const container = document.querySelector(".container");
const listItems = container.querySelectorAll("li");

In this example, the listItems variable references all <li> elements within the container element.

Modifying HTML and Content

You can manipulate the content of elements using various properties and methods.

  • innerHTML: Gets or sets the HTML content of an element, including its child elements.
  • textContent: Gets or sets the text content of an element, excluding its child elements.
  • createTextNode: Creates a new text node that can be inserted into an element.

Example: 

<div id="myDiv">
  <p>This is a paragraph.</p>
</div>
const container = document.getElementById("myDiv");
container.innerHTML = "<h2>New Heading</h2>";
const newParagraph = document.createTextNode("This is a new paragraph.");
container.appendChild(newParagraph);

In this example, the content of the container is modified by setting the innerHTML and appending a new text node.

DOM Events

The DOM allows you to work with a wide range of events, from user interactions to document-related events. Here are some commonly used events:

  • Mouse Events: Events related to mouse interactions, such as “click,” “mouseover,” and “mouseout.”
  • Keyboard Events: Events triggered by keyboard input, such as “keydown” and “keyup.”
  • Form Events: Events related to form elements, including “submit,” “input,” and “change.”
  • Window Events: Events related to the browser window, such as “load,” “resize,” and “scroll.”

You can use event listeners to respond to these events and execute specific actions in your web applications.

Example: 

<button id="myButton">Click Me</button>
const button = document.getElementById("myButton");
button.addEventListener("click", function() {
  alert("Button clicked!");
});

In this example, an event listener is added to the button, responding to the “click” event.

JavaScript and the DOM: A Dynamic Duo

JavaScript and the DOM work hand in hand to create dynamic and interactive web applications. JavaScript provides the scripting power to manipulate the DOM, and the DOM serves as the interface to access and modify web content. Together, they enable a wide range of functionality, including form validation, interactive elements, and real-time updates.

Here are some common use cases for JavaScript and the DOM:

  • Form Validation: JavaScript can validate user input in forms, ensuring data is entered correctly before submission.
  • Interactive Elements: You can create interactive elements like dropdown menus, tabs, and sliders.
  • Real-time Updates: JavaScript can update content dynamically without requiring page refreshes, such as live chat and notifications.
  • Animation: You can create animations, transitions, and effects to enhance user experience.
  • Data Fetching: JavaScript can request data from servers and update the page with new content.

Conclusion

The Document Object Model (DOM) is an integral part of web development, enabling developers to create interactive and dynamic web applications. With JavaScript, you can access, manipulate, and respond to the DOM, making it a powerful tool for building feature-rich websites.

In this chapter, we’ve explored the basics of the DOM, including how to access and modify elements, respond to events, and traverse the DOM tree. As you dive deeper into web development, you’ll continue to leverage the DOM to create engaging and user-friendly applications.

In the next chapter, we’ll explore another crucial aspect of JavaScript: working with asynchronous code and utilizing Promises to handle complex operations. Join us in Chapter 10: Asynchronous JavaScript and Promises, where we’ll explore asynchronous programming, callbacks, and how Promises simplify managing async tasks.

Scroll to Top