How to search the value of the type attribute of a link in JavaScript?

To search or retrieve the value of the type attribute of a link in JavaScript, you can use the type property of the anchor element. This attribute specifies the MIME type of the linked resource.

Syntax

element.type

Example: Getting Type Attribute Value

<!DOCTYPE html>
<html>
   <body>
      <p><a id="qriesid" href="https://qries.com/" type="text/html">Qries</a></p>
      <script>
         var x = document.getElementById("qriesid").type;
         document.write("Value of the type attribute: " + x);
      </script>
   </body>
</html>
Value of the type attribute: text/html

Using Modern DOM Methods

You can also use getAttribute() method for better control:

<!DOCTYPE html>
<html>
   <body>
      <p><a id="myLink" href="/downloads/file.pdf" type="application/pdf">Download PDF</a></p>
      <p id="result"></p>
      <script>
         var link = document.getElementById("myLink");
         var typeValue = link.getAttribute("type");
         document.getElementById("result").textContent = "Type: " + typeValue;
      </script>
   </body>
</html>
Type: application/pdf

Searching Links by Type Attribute

To find all links with a specific type attribute value:

<!DOCTYPE html>
<html>
   <body>
      <a href="/doc1.pdf" type="application/pdf">Document 1</a><br>
      <a href="/doc2.html" type="text/html">Document 2</a><br>
      <a href="/doc3.pdf" type="application/pdf">Document 3</a>
      <p id="pdfLinks"></p>
      <script>
         var links = document.querySelectorAll('a[type="application/pdf"]');
         document.getElementById("pdfLinks").textContent = "Found " + links.length + " PDF links";
      </script>
   </body>
</html>
Found 2 PDF links

Comparison of Methods

Method Use Case Returns
element.type Direct property access String value
getAttribute("type") Explicit attribute retrieval String value or null
querySelectorAll('[type="value"]') Finding multiple elements NodeList

Conclusion

Use the type property or getAttribute() method to retrieve the type attribute value from anchor elements. For searching multiple links, use CSS selectors with querySelectorAll().

Updated on: 2026-03-15T23:18:59+05:30

256 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements