HTML - DOM attributes Property

Quiz

The HTML DOM attributes property provides you access to a collection of attributes belonging to an HTML element. This collection is returned as a NamedNodeMap, which allows you to interact with the attributes using their names and retrieve their values.

A NamedNodeMap is an object that holds a collection of an element's attributes. It allows us to access attributes indexed by their names and supports various operations.

Syntax

Following is the syntax of the HTML DOM attributes property −

node.attributes

Parameters

Since it is a property, it does not accept any parameters.

Return Value

This property returns 'NameNodeMap' containing the collection of attributes of an HTML element and It returns 'null' if the elements has no attributes

Example 1: Modifying Attributes of the p element

The following example demonstrates the usage of the HTML DOM attributes property. It modifies the content of the <p> element −

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM attributes</title>
<style>
   .highlight {
      background-color: yellow;
    }
</style>
</head>
<body>
<p></p>Modifies attributes of the P Element</p>
<p id="myParagraph">Example Text</p>
<button onclick="modifyParagraph()">Modify</button>
<script>
   function modifyParagraph() {
      var paragraph = document.getElementById("myParagraph");
      paragraph.setAttribute("title", "Modified"); 
      paragraph.textContent = "Modified Text";
      paragraph.classList.add("highlight");
    }
</script>
</body>
</html>

Example 2: Checking for Attribute Existence

Following is another example of the HTML DOM attributes property. This property is used to check whether the "title" attribute exists on a paragraph element −

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM Attributes</title>
</head>
<body>
</p>Checking for attribute Existence</p>
<p id="myParagraph" title="Example Title">Example Text</p>
<button onclick="checkAttributeExistence()">Check Attribute</button>  
<script>
   function checkAttributeExistence() {
      var paragraph = document.getElementById("myParagraph");
      var hasTitle = paragraph.hasAttribute("title");
      alert("Title Attribute Exists: " + hasTitle);
   }
</script>
</body>
</html>

Example 3: Retrieves Attribute List from HTML Element

The example below retrieves and displays all attributes of an HTML <div> element. All the attributes will be displayed in list format when the button is clicked −

<!DOCTYPE html>
<html lang="en">
<head> 
<title>HTML DOM attributes</title>
</head>
<body>
<div id="ex-Div"class="example" data-info="ex-data">
Hit the button to see the Div Elements...
</div>
<button onclick="showAttributes()">Show Attributes</button>
<ul id="attributeList"></ul>
<script>
   function showAttributes() {
      const element = document.getElementById('ex-Div');
      const attributeList = document.getElementById('attributeList');
      attributeList.innerHTML = '';
      for (let attr of element.attributes) {
         const li = document.createElement('li');
         li.textContent = `${attr.name}: 
         ${attr.value}`;
         attributeList.appendChild(li);
      }
   }
</script>
</body>
</html>

Example 4: Getting Specific Attribute Value

This example retrieves the value of the title attribute from a paragraph element with the ID "myParagraph" and displays it in an alert −

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM attributes</title>
</head>
<body>
<p>Getting Specific Attribute</p>
<p id="myParagraph" title="Example Title">Example Text</p>
<button onclick="getAttributeValue()">Get Attribute Value</button>    
<script>
   function getAttributeValue() {
      var paragraph = document.getElementById("myParagraph");
      var titleValue =paragraph.getAttribute("title");
      alert("Title Attribute Value: " + titleValue);
   }
</script>
</body>
</html>

Supported Browsers

Property
attributes	Yes	Yes	Yes	Yes	Yes

html_dom.htm

Print Page