HTML - DOM Element getAttributeNode() Method

Quiz

The HTML DOM ElementgetAttributeNode()method is used to get the attribute node object that represents one of the attributes of an HTML element in DOM (Document Object Model).

The returned object includes both the attribute's name and its value. By specifying the name and value property you can access them.

Syntax

Following is the syntax of the HTML DOM Element getAttributeNode() method −

element.getAttributeNode(attributeName)

Parameters

This method accepts a single parameter as listed below.

Parameters	Description
attributeName	The name of the attribute for which the method returns the object.

Return Value

This method returns the name of the attribute for which the method returns the object.

Example 1: Retrieving a Specific Attribute Node

The following program demonstrates the usage of the HTML DOM Element getAttributeNode() method. It returns the node name of the <div> element −

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM Element getAttributeNode()</title>
</head>
<body>
<h3>HTML DOM Element getAttributeNode() method</h3>
<hp>Retrieving a Specific Attribute Node</p><br>
<div id="mydivElement" data-info="Accessing div element">
This is div Element</div>
<p id="res">The attribute node is: </p>
<script>
   var element = document.getElementById("mydivElement");
   var attributeNode = element.getAttributeNode("data-info");
   document.getElementById('res').innerHTML = 'The attribute node is: ' 
   + attributeNode;
</script>
</body>
</html>

The above program accesses and displays the object [object Attr].

Example 2: Retrieving class Attribute Value

Following is another example of the HTML DOM Element getAttributeNode() method. This method retrieves an attribute node object, and through that, we retrieve the class attribute value −

<!DOCTYPE html>
<html lang="en">
<head>
<style>
   .important{
      color: blue;
   }
</style>
</head>
<body>
<h1 class = "important" >Document Information</h1>
<h2>HTML DOM Element getAttributeNode() Method</h2>
<p id = "demo"></p>
<script>
   const h1Element = document.querySelector("h1");
   const classAttrNode = h1Element.getAttributeNode("class");
   document.getElementById("demo").textContent = 
   "The class attribute node value: " + classAttrNode.value;
</script>
</body>
</html>

Once the above program is executed, it displays the "class" attribute node value.

Example 3: Node Value of target Attribute

In the example below, the getAttributeNode() method retrieves the node object of the target attribute and through that retrieves the value −

<!DOCTYPE html>
<html>
<head>
<style>
    .active {
      font-weight: bold;
      color: blue;
    }
</style>
</head>
<body>
<h1>Navigation Menu</h1>
<h2>The getAttributeNode() Method</h2>
<ul class = "list" id="menu">
    <li><a href="#home" id="homeLink">Home</a></li>
    <li><a href="#about" id="aboutLink">About Us</a></li>
</ul>
<p>Click on a link below to display its target attribute value:</p>
<p id="targetValue"></p>
<script> 
   const menuLinks = 
   document.querySelectorAll("#menu a");
   menuLinks.forEach(link => {
   link.addEventListener("click", function() {
      const targetAttrNode = link.getAttributeNode("href");
      const targetValue = targetAttrNode.value;
      document.getElementById("targetValue").textContent = 
	  `Target attribute value: ${targetValue}`;
      menuLinks.forEach(l => l.classList.remove("active"));
      link.classList.add("active");
      });
   });
</script>
</body>
</html>

The above program displays the "target" attribute value when the user clicks the given links.

Supported Browsers

Method
getAttributeNode()	Yes 5.0	Yes 10.0	Yes 16.0	Yes 5.1	Yes 10.6

html_dom_element_reference.htm

Print Page