Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to get the value of the hreflang attribute of a link in JavaScript?
In this tutorial, we will learn how to get the value of the hreflang attribute of a link in JavaScript.
The hreflang is an attribute of a link or anchor tag which specifies the language of the linked document or href attribute.
It is used by search engines to understand the link’s language and the targeted geographical location of the website. For better SEO hreflang attribute must be used.
A single language or combination of language and region is used as the value of the hreflang attribute. It uses the language code ISO-639-1 and region code ISO-3166-1.
For example: If the hreflang attribute value is 'en−us,' then the link is in the English language and targeted for the United States of America. 'x−default' is used for default links that don't specifically target a region or language.
Using document.getElementById() method
The document.getElementById() method is useful for getting the value of the hreflang attribute of a link or anchor tag. It takes the id of the anchor tag in the parameter and returns an element object of that anchor tag, and from that object, we can get the value of hreflang by using the key 'hreflang'.
Users can follow the below syntax to get the value of hreflang of a link.
Syntax
document.getElementById('mylink').hreflang
In the above syntax, ‘mylink’ is the id of an anchor tag and by using document.getElementById method and hreflang key, we are getting the hreflang attribute value.
Example
In the below example, we have used document.getElementById() method to get the value of the hreflang attribute of a link.
<html> <body> <h4>Get the value of the hreflang attribute of a link in JavaScript using <i>document.getElementById()</i> method</h4> <div> <a id="link1" href="https://www.tutorialspoint.com/" hreflang="en">Link 1</a><br> <a id="link2" href="https://www.tutorialspoint.com/" hreflang="en-us">Link 2</a> </div> <br/> <div id = "root"> </div> <script> // accessing all hreflang value from all links let hreflang1=document.getElementById('link1').hreflang let hreflang2=document.getElementById('link2').hreflang let root = document.getElementById('root') root.innerHTML='Link 1 hreflang: '+hreflang1+'<br>' root.innerHTML+='Link 2 hreflang: '+hreflang2+'<br>' </script> </body> </html>
In the above output, users can see that using document.getElementById method, we get the hreflang attribute value of different links
Using document.getElementsByTagName() Method
In JavaScript, the document.getElementsByTagName() method can also be used for getting the value of the hreflang attribute of a link or anchor tag. It takes a tag name in the parameter and returns an HTMLCollection, similar to a list or array. It contains all of the element objects of that tag name, and from each object, we can also get the value of hreflang by using the key 'hreflang'.
Syntax
// getting all anchor tags
let links = document.getElementsByTagName('a')
// looping through all the HTMLCollection links
for (let index = 0; index < links.length; index++) {
let link = links[index] // accessing each anchor tag element
let hreflang = link.hreflang // accessing the hreflang value
console.log(hreflang)
}
In the above syntax, document.getElementByTagName() method takes ‘a’ as an argument, so it returns all of the elements, which is an anchor tag in an HTMLCollection, and looping through it, we are getting all of the hreflang attributes values from all links.
Example
In the below example, we have used document.getElementByTagName() method to get the value of the hreflang attribute of a link.
<html> <body> <h4>Get the value of the hreflang attribute of a link in JavaScript using <i>document.getElementsByTagName()</i> method</h4> <div> <a id="link1" href="https://www.tutorialspoint.com/" hreflang="en">Link 1</a><br> <a id="link2" href="https://www.tutorialspoint.com/" hreflang="en-us">Link 2</a> </div> <br /> <div id="root"></div> <script> let root=document.getElementById('root') let links=document.getElementsByTagName('a') for (let index=0; index < links.length; index++) { let link = links[index] let hreflang = link.hreflang root.innerHTML +='Link '+ (index+1) +' hreflang: '+hreflang+'<br>' } </script> </body> </html>
In the above output, users can see that using document.getElementByTagName() method, we get the hreflang attribute value of different links.
Using document.querySelectorAll() Method
In JavaScript, the document.querySelectorAll() method can also be used for getting the value of the hreflang attribute of a link or anchor tag. It takes a tag name and CSS selectors in the parameter and returns a NodeList similar to a list or array. It contains all of the elements as node element objects of that tag name, and from each object, we can also get the value of hreflang by using the key 'hreflang'.
Using document.querySelectorAll() we can get all the anchor tags that have hreflang as an attribute. In the document.getElementByTagName() method, we get all the anchor tags whether it has hreflang attribute or not.
Syntax
// getting all anchor tags that have hreflang attribute
let links = document.querySelectorAll('a[hreflang]')
In the above syntax, document.querySelectorAll() method takes ‘a[hreflang]’ as an argument, so it returns all of the elements, which is an anchor tag containing hreflang attribute in a NodeList and looping through it, we are getting all of the hreflang attributes values from all links.
Example
In the below example, we have used document.querySelectorAll() method to get the value of the hreflang attribute of a link.
<html> <body> <h4>Get the value of the hreflang attribute of a link in JavaScript using <i>document.querySelectorAll()</i> method</h4> <div> <a id="link1" href="https://www.tutorialspoint.com/" hreflang="en" > Link 1 </a><br> <a id="link2" href="https://www.tutorialspoint.com/" hreflang="en-us"> Link 2 </a><br> <a id="link3" href="https://www.tutorialspoint.com/">Link 3(no hreflang)</a> </div> <br /> <div id = "root"> </div> <script> let root = document.getElementById('root') let links = document.querySelectorAll('a[hreflang]') for (let index=0; index < links.length; index++) { let hreflang = links[index].hreflang root.innerHTML += 'Link ' + (index + 1) +' hreflang: '+hreflang+'<br>' } </script> </body> </html>
In the above output, using document.querySelectorAll method, we get the hreflang attribute value of all links with the hreflang attribute.
574 Views
