32 - Accessing and modifying HTML elements (Javascript)

Working with the Document Object Model (DOM)

The Document Object Model (DOM) is a crucial component of web development that enables the manipulation of HTML and XML documents in the browser. It represents the structured content of a web page as a tree-like structure of objects, allowing you to access and modify the page’s elements using JavaScript. In this discussion, we will explore how to access and modify HTML elements using the DOM, along with practical code examples.

Accessing HTML Elements

Accessing HTML elements is the foundation of DOM manipulation. JavaScript provides several methods to access elements based on their attributes, such as their id, class, tag name, or CSS selectors.

Example of accessing HTML elements by id:


<!-- HTML -->
<div id="myElement">This is a div</div>

// JavaScript
const element = document.getElementById("myElement");
console.log(element.textContent); // Outputs "This is a div"

In this code, we use the getElementById method to access an HTML element by its id and retrieve its text content.

Modifying HTML Elements

Once you’ve accessed an HTML element, you can modify its properties, attributes, and content using JavaScript.

Example of modifying HTML elements:


<!-- HTML -->
<p id="myParagraph">This is a paragraph.</p>

// JavaScript
const paragraph = document.getElementById("myParagraph");
paragraph.textContent = "Updated paragraph.";
paragraph.style.color = "blue";

In this code, we access a paragraph element, change its text content, and apply a new CSS style to change its text color.

Adding and Removing Elements

You can dynamically add or remove HTML elements using the DOM. This is particularly useful for creating interactive web pages.

Example of adding and removing HTML elements:


// JavaScript
// Create a new element
const newDiv = document.createElement("div");
newDiv.textContent = "New div element";

// Add the new element to the document
document.body.appendChild(newDiv);

// Remove an existing element
const elementToRemove = document.getElementById("elementToRemove");
document.body.removeChild(elementToRemove);

In this code, we create a new div element, add it to the document, and then remove an existing element by selecting it and calling the removeChild method.

Working with HTML Element Attributes

You can access and modify HTML element attributes like src, href, class, and data attributes using the DOM.

Example of working with HTML element attributes:


<!-- HTML -->
<img id="myImage" src="image.jpg" alt="An image">

// JavaScript
const image = document.getElementById("myImage");
console.log(image.src); // Outputs the image source
image.alt = "A new alt text"; // Change the alt attribute

In this code, we access an image element, retrieve its source attribute, and modify its alt attribute.

Handling Events

The DOM allows you to interact with users by responding to events such as clicks, keypresses, and mouse movements.

Example of handling events:


<!-- HTML -->
<button id="myButton">Click Me</button>

// JavaScript
const button = document.getElementById("myButton");
button.addEventListener("click", () => {
    alert("Button clicked!");
});

In this code, we attach a click event listener to a button element, which displays an alert when the button is clicked.

Traversing the DOM

You can navigate through the DOM tree to access parent, child, or sibling elements.

Example of traversing the DOM:


<!-- HTML -->
<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

// JavaScript
const ul = document.querySelector("ul");
const firstItem = ul.firstElementChild;
const secondItem = firstItem.nextElementSibling;

In this code, we access an unordered list, retrieve the first list item, and then navigate to the second list item.

Conclusion

The Document Object Model is a fundamental part of web development that empowers developers to create dynamic and interactive web pages. By understanding how to access and modify HTML elements, work with attributes, handle events, and traverse the DOM tree, you can build web applications that respond to user interactions and provide engaging user experiences.

32 – Accessing and modifying HTML elements (Javascript)