HTML - DOM Element hasAttributes() Method

Quiz

The HTML DOM Element hasAttributes() method is used to determine whether an element in the HTML DOM has any attributes. An attributes allow you to display additional information about the element.

This method returns a boolean value: true if the element has one or more attributes, otherwise it returns false.

See also: The hasAttribute() method is similar to hasAttributes() method. This method checks for the existence of specific attributes, whereas the hasAttributes() method checks whether the element has any attributes at all.

Syntax

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

element.hasAttributes();

Parameters

This function does not accept any parameter.

Return Value

This method returns a boolean value 'true' if the element has attributes; otherwise, it returns 'false'.

Example 1: Checking if Div Elements has any Attributes

The following is the basic example of the HTML DOM Element hasAttributes() method. It checks attributes for the <div> element −

<!DOCTYPE html>
<html lang="en">
<head> 
<title>HTML DOM Element hasAttributes()</title>
</head>
<body>
<h3>HTML DOM Element hasAttributes() Method</h3>  
<div id="exampleDiv" title="Sample Div">Does it has any attributes?</div>
<br>
<button onclick="checkAttributes()">Check Attributes</button>
<p id="result"></p>
<script>
   function checkAttributes() {
      const divElement = document.getElementById('exampleDiv');
      let res = divElement.hasAttributes(); 
      document.getElementById('result').textContent = 
	  "Does the div has attributes? " + res;
   }
</script>
</body>
</html>

The above program displays "true", because the "div" element has "id" and "title" attributes.

Example 2: Checking Attributes for Body Element

Here is another example of the HTML DOM Element hasAttributes() method. This method is used to check whether the <body> element has any attributes −

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM Element hasAttributes() Method</title>
</head>
<body>
<h3>HTML DOM Element hasAttributes() Method</h3>
<p>Does Body element has any attribute?</p>
<button onclick="checkAttributes()">Check Body Attributes</button>
<p id="result"></p>
<script>
   function checkAttributes() {
      const bodyElement = document.body;
      let res = bodyElement.hasAttributes();
      document.getElementById('result').textContent = 
      "Does Body element has any attributes? " + res;
   }
</script>
</body>
</html>

When the button is clicked, it will display "false" because the "body" has no attributes.

Example 3: Checking if an Anchor Tag has Attributes

In the example below, we use the hasAttributes() method to determine if the anchor (<a>) element has any attributes −

<!DOCTYPE html>
<html lang="en">
<head> 
<title>HTML DOM Element hasAttributes()</title>
</head>
<body>
<h3>HTML DOM Element hasAttributes() Method</h3> 
<p>Checks if Anchor tag has any Attributes</p> 
<a id="myLink" href="https://www.tutorialspoint.com/">Example Link</a>
<button onclick="checkAttributes()">Check Attributes</button>
<p id="result"></p>
<script>
   function checkAttributes() {
      const linkElement = document.getElementById('myLink');
      document.getElementById('result').textContent = 
	  "The link has attributes.";      
   }
</script>
</body>
</html>

The above program displays the message "The link has attributes." if the anchor element has the attribute.

Supported Browsers

Method
hasAttributes()	Yes	Yes	Yes	Yes	Yes

html_dom.htm

Print Page