HTML - DOM getAttribute() Method

Quiz

The HTML DOM getAttribute() method is used to get the value of a specified attribute that belongs to an HTML element. If the given attribute does not exist the value returned will be "null".

Syntax

Following is the syntax of the HTML DOM getAttribute() method −

element.getAttribute(attributeName)

Parameters

This method accepts a single parameter as mentioned below −

Parameter	Description
attributeName	The name of the attribute whose value you want to retrieve.

Return Value

This method returns a string that holds the value of the specified attribute. If the attribute does not exists, it returns 'null'.

Example 1: Accessing and Displaying the "href" Attribute

The following is the basic example of the HTML DOM getAttribute() method. It gets the href attribute from anchor (<a>) element −

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM getAttribute()</title>
</head>
<body>
<h4>Retrieves the value of href attribute</h4> 
<a id="myLink" href="https://www.tutorialspoint.com">Example Link</a>
<div id="output"></div>
<script>
   // Selecting the anchor element by ID
   const myLink = document.getElementById('myLink');
   const hrefVal = myLink.getAttribute('href');
   // Displaying the result
   const od= document.getElementById('output');
   od.textContent = `Link URL: ${hrefVal}`;
</script>
</body>     
</html>

Example 2: Get the Attribute Values of an HTML element

Following is another example of the HTML DOM getAttribute() method. We use this method to get all attributes, that are available inside the <div> element −

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM getAttribute()</title>
</head>
<body>
<div id="myElement" class="box" 
data-info="example data">
<p>This is a paragraph inside a div element.</p>
<a href="https://www.tutorialspoint.com">Example Link</a>
</div>
<div id="output"></div>
<script>
   // Selecting the element by ID
   const my= document.getElementById('myElement');
   //Retrieving attribute values
   const cv = my.getAttribute('class');
   const dInv = my.getAttribute('data-info');
   const hv = my.querySelector('a').getAttribute('href');
   // Displaying the results
   const od = document.getElementById('output');
   od.innerHTML = `
       <p>Class attribute value: ${cv}</p>
       <p>Data-info attribute value: ${dInv}</p>
       <p>Anchor href attribute value: ${hv}</p>
   `;
</script>
</body>
</html>

Example 3: Getting the Button Attribute

This example shows the usage of the DOM getAttribute() method to access and display the value of the onclick attribute from an HTML<button>element −

<!DOCTYPE html>
<html lang="en">
<head>  
<title>HTML DOM getAttribute()</title>
</head>
<body>
<h4>Retrieves the value of Button attribute</h4> 
<button id="myB" onclick="displayMessage()">Click me</button>
<div id="ot"></div>
<script>
   function displayMessage() {
      const ocv = document.getElementById
      ('myB').getAttribute('onclick');
      document.getElementById('ot').textContent = `Value of onclick attribute: ${ocv}`;
   }
</script>
</body>
</html>

Supported Browsers

Method
getAttribute()	Yes	Yes	Yes	Yes	Yes

html_dom_element_reference.htm

Print Page