Skip to main content

Using getAttribute in JavaScript DOM (Live Playground)

In this tutorial, we will learn how to use the getAttribute method in JavaScript to retrieve the values of HTML element attributes. We'll cover the basics of the getAttribute method and provide sample code with explanations.

What is getAttribute?​

The getAttribute method is a built-in JavaScript DOM method that allows you to retrieve the value of a specified attribute on an HTML element. You can use the getAttribute method to access and manipulate the properties of your web page's content.

Sample Code: Using getAttribute​

Let's say we have the following HTML document:

<!DOCTYPE html>
<html>
  <head>
    <title>getAttribute Example</title>
  </head>
  <body>
    <div id="mainContainer">
      <h1 class="mainHeading">Welcome to My Web Page!</h1>
      <p class="mainParagraph" id="firstParagraph">This is an introductory paragraph.</p>
    </div>
  </body>
</html>

To use getAttribute to retrieve the value of an attribute on an HTML element, you'll need to include a JavaScript <script> tag in your HTML document. For this example, we will add an inline script, although it's generally recommended to use external JavaScript files for larger projects.

Here's how you can use the getAttribute method to retrieve the value of the class attribute on the p element with the ID firstParagraph:

<!DOCTYPE html>
<html>
  <head>
    <title>getAttribute Example</title>
  </head>
  <body>
    <div id="mainContainer">
      <h1 class="mainHeading">Welcome to My Web Page!</h1>
      <p class="mainParagraph" id="firstParagraph">This is an introductory paragraph.</p>
    </div>

    <script>
      // Select the element with the ID "firstParagraph"
      var firstParagraph = document.getElementById('firstParagraph');

      // Use getAttribute to retrieve the value of the "class" attribute
      var paragraphClass = firstParagraph.getAttribute('class');

      // Display the value of the "class" attribute in the console
      console.log("The 'class' attribute value of the first paragraph is:", paragraphClass);
    </script>
  </body>
</html>

After running this code, the console will display: "The 'class' attribute value of the first paragraph is: mainParagraph".

Live Playground, Try it Yourself

Conclusion​

The getAttribute method is a useful tool for retrieving the values of HTML element attributes in the DOM. By mastering this method, you can access and manipulate the properties of your web page's content, allowing you to create more dynamic and interactive experiences for your users.