Open In App

HTML DOM getAttribute() Method

Improve
Improve
Like Article
Like
Save
Share
Report

The HTML DOM getAttribute() method returns the value of an element’s attribute. By specifying the name of the attribute, it can get the value of that element. To get the values from non-standard attributes, we can use the getAttribute() method.

Note: It will return a null or an empty string if the specified attribute doesn’t exist.

Syntax:

Object.getAttribute(attributename)

Parameter:

Parameter

Description

name

It is a required parameter with a string type that specifies the name of the attribute that needs to retrieve the value.

Example 1: This example illustrates the DOM getAttribute() method that specifies the value of the attribute for the specified name, of an element.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <title>HTML DOM getAttribute() Method</title>
</head>
  
<body>
    <h1 style="color:green;width:50%;">
        GeeksforGeeks
    </h1>
    <h2>DOM getAttribute() Method</h2>
    <br>
    <button id="button" 
            onclick="geeks()">Submit</button>
    <p id="gfg"></p>
    <script>
        function geeks() {
            let rk =
document.getElementById("button").getAttribute("onClick");
document.getElementById("gfg").innerHTML = rk;
        }
    </script>
</body>
  
</html>


Output:

DOM getAttribute() Method

Example 2: This example illustrates the DOM getAttribute() method to retrieve the href attribute value of an element.

HTML




<!DOCTYPE html>
<html>
  
<body>
    <h1 style="color:green;width:50%;">
        GeeksforGeeks
    </h1>
    <h2>DOM getAttribute() Method</h2>
    <a id="gfg" href="www.geeksforgeeks.com">
        GeeksforGeeks
    </a><br><br>
    <button id="button" 
            onclick="geeks()">Submit</button>
    <br>
    <p id="rk"></p>
    <script>
        function geeks() {
            var rk = document.getElementById("gfg").getAttribute("href");
            document.getElementById("rk").innerHTML = rk;
        }
    </script>
</body>
  
</html>


Output:

DOM getAttribute() Method

We have a complete list of HTML DOM methods, to check those please go through this HTML DOM Object Complete reference article.

Supported Browsers:

  • Google Chrome 1.0
  • Microsoft Edge 12.0
  • Firefox 1.0
  • Opera 8.0
  • Safari 1.0

We have a Cheat Sheet on Javascript where we covered all the important topics of Javascript to check those please go through Javascript Cheat Sheet-A Basic guide to JavaScript.



Last Updated : 30 Jan, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads