Getting and Setting HTML Attributes with JavaScript: A Simple Guide

When building dynamic web pages, you often need to read or modify the attributes of HTML elements. JavaScript provides simple methods to do this: getAttribute() and setAttribute(). Let’s explore how to use these methods with some practical examples.

Our HTML Structure

First, let’s look at the HTML we’ll be working with:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>DOM GET AND SET ATTRIBUTE</title>
    <script src="./2DOM-GET-SET-ATTRIBUTE.JS" defer></script>
  </head>
  <body>
    <h1 id="main-id" class="main-class temp-class">
      Manage your tasks <span style="display: none">Hello</span>
    </h1>
  </body>
</html>

This HTML creates an <h1> element with an id and two classes. We’ll use JavaScript to interact with these attributes.

Selecting the Element

Before we can get or set attributes, we need to select the element. We’ll use the querySelector method:

const heading = document.querySelector("h1");
console.dir(heading);

Output:

<h1 id="main-id" class="main-class temp-class">
    Manage your tasks
    <span style="display: none">Hello</span>
</h1>

This selects the <h1> element and logs it to the console.

Getting Attributes

Getting the ID

To get the value of the id attribute, we use the getAttribute() method:

let getID = heading.getAttribute("id");
console.dir(getID);

Output:

main-id

This retrieves the value of the id attribute, which is “main-id”.

Getting Classes

We can use the same method to get the value of the class attribute:

let getCLASS = heading.getAttribute("class");
console.dir(getCLASS);

Output:

main-class temp-class

This returns a string containing all the classes applied to the element.

Setting Attributes

To change an attribute’s value, we use the setAttribute() method. Let’s change the class attribute:

heading.setAttribute("class", "main-class new-class new-class2");
console.dir(heading);

Output:

<h1 id="main-id" class="main-class new-class new-class2">
    Manage your tasks
    <span style="display: none">Hello</span>
</h1>

This replaces the existing classes with the new set of classes we specified.

Key Points to Remember

getAttribute(attributeName) gets the value of the specified attribute.
setAttribute(attributeName, value) sets the value of the specified attribute.
When setting the class attribute, the entire class string is replaced, not appended to.
These methods work on any attribute, not just id and class.

Practical Uses

Dynamically changing classes to apply different styles
Reading and updating custom data attributes
Modifying form input attributes like disabled or readonly
Updating image sources or link URLs

Conclusion

Understanding how to get and set attributes is crucial for creating dynamic web pages. These methods allow you to read the current state of your HTML elements and modify them based on user interactions or other events.

Remember to always check if an element exists before trying to get or set its attributes to avoid errors.

Happy Learning!