HTML - DOM Element hasAttribute() Method

The HTML DOM Element hasAttribute() method is used to check whether the specified attribute present within an HTML element. An attribute allow you display an additional information about the particular element.

This method returns a boolean value true if the attribute exists , otherwise it returns false.

See also:- The hasAttributes() method is similar to the hasAttribute() method, but it checks for the presence of any attributes in an element, whereas the hasAttribute() method checks for the presence of a specific attribute within the element.

Syntax

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

element.hasAttribute(name);

Parameters

This method accepts a single parameter as mentioned below −

Parameter	Description
name	A string representing the name of the attribute.

Return Value

The method returns true if the attribute is present on the HTML element and false otherwise.

Example 1: Checking for a Specific Attribute

If the specified attribute is present within the element, the HTML DOM Element hasAttribute() method will return true −

<!DOCTYPE html>
<html lang="en">
<head>  
<title>HTML DOM Element hasAttribute()</title>
</head>
<body>
<h3>HTML DOM Element hasAttribute() Method</h3>
<div id="exampleDiv" title="Sample Div"></div>  
<p id="attributeInfo"></p>
<script> 
   const divElement = document.getElementById('exampleDiv');
   const hasTitle = divElement.hasAttribute('title');
   document.getElementById('attributeInfo').textContent = 
   "Does the div have a title attribute? " + hasTitle.toString(); 
</script>
</body>
</html>

The above program returns "true".

Example 2

If the specified attribute is not present within the element, the HTML DOM Element hasAttribute() method will return false −

<!DOCTYPE html>
<html lang="en">
<head>  
<title>HTML DOM Element hasAttribute()</title>
</head>
<body>
<h3>HTML DOM Element hasAttribute() Method</h3>
<div id="exampleDiv" title="Sample Div"></div>  
<p id="attributeInfo"></p>
<script> 
   const divElement = document.getElementById('exampleDiv');
   const hasTitle = divElement.hasAttribute('class');
   document.getElementById('attributeInfo').textContent = 
   "Does the div have a 'class' attribute? " + hasTitle.toString(); 
</script>
</body>
</html>

Since the specified attribute does not exist within the element, the above program will return "false".

Example 3: Checking for multiple Attribute

In the example below, we use the hasAttribute() method to check whether the <div> element has the id and data-info attributes −

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM Element hasAttribute()</title>
</head>
<body>
<h3>HTML DOM Element hasAttribute() Method</h3>
<div id="exampleDiv" title="Div" data-info="12345">
Hello! I am Div. Check my attributes? Hit the button!
</div>
<br>
<button onclick="displayAttributes()">Display Attributes</button>
<script>
   function displayAttributes() {
      const divElement = document.getElementById('exampleDiv');
      const hasTitle = divElement.hasAttribute('title');
      const hasDataInfo = divElement.hasAttribute('data-info');
      alert(`Title attribute: ${hasTitle} 
	  \nData-info attribute: ${hasDataInfo}`);
   }
</script>
</body>
</html>

When the button is clicked, an alert message will pop up displaying the "title" and "data-info" attributes, along with a boolean value indicating their presence.

Example 4: Handling absence of an Attribute

Here is another example of the hasAttribute() method. We use the result of this method in a conditional statement to manage cases where an attribute does not exist −

<!DOCTYPE html>
<html lang="en">
<head>  
<title>HTML DOM Element hasAttribute()</title>
</head>
<body>
<h3>HTML DOM Element hasAttribute() Method</h3>
<div id="exampleDiv">Does Div have any attributes?</div><br>
<button onclick="displayAttributes()">Check Attributes</button> 
<p id="attributeInfo"></p>
<script>
   function displayAttributes() {
      const divElement = document.getElementById('exampleDiv');
      const hasTitle = divElement.hasAttribute('title');
      document.getElementById('attributeInfo').textContent =  
	  `false - It has ${hasTitle ? 'title' : 'no'} attribute.`;
   }
</script>
</body>
</html>

The above program checks the presence of an attribute within the element and displays the message accordingly.

Supported Browsers

Method
hasAttribute()	Yes	Yes	Yes	Yes	Yes

html_dom.htm

Print Page