如何在 JavaScript 中获取链接的 hreflang 属性值?
在本教程中，我们将学习如何在 JavaScript 中获取链接的 hreflang 属性值。
hreflang 是链接或锚标记的属性，用于指定链接文档或 href 属性的语言。
搜索引擎使用它来了解链接的语言和网站的目标地理位置。为了获得更好的 SEO，必须使用 hreflang 属性。
使用单一语言或语言和地区的组合作为 hreflang 属性的值。它使用语言代码 ISO-639-1 和地区代码 ISO-3166-1。
例如:如果 hreflang 属性值为"en-us"，则链接使用英语，并针对美国。 'x−default' 用于不专门针对某个地区或语言的默认链接。
使用 document.getElementById() 方法
document.getElementById() 方法可用于获取链接或锚标记的 hreflang 属性的值。它获取参数中锚标记的 id 并返回该锚标记的元素对象，从该对象中，我们可以使用键"hreflang"获取 hreflang 的值。
用户可以按照以下语法获取链接的 hreflang 值。
语法
document.getElementById('mylink').hreflang
在上述语法中，"mylink"是锚标记的 id，通过使用 document.getElementById 方法和 hreflang 键，我们可以获取 hreflang 属性值。
示例
在下面的示例中，我们使用 document.getElementById() 方法获取链接的 hreflang 属性值。
<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>
在上面的输出中，用户可以看到使用 document.getElementById 方法，我们获取了不同链接的 hreflang 属性值
使用 document.getElementsByTagName() 方法
在 JavaScript 中，document.getElementsByTagName() 方法也可用于获取链接或锚标记的 hreflang 属性值。它在参数中接受一个标记名称并返回一个 HTMLCollection，类似于列表或数组。它包含该标签名称的所有元素对象，并且从每个对象中，我们还可以使用键"hreflang"获取 hreflang 的值。
语法
// 获取所有锚标签
let links = document.getElementsByTagName('a')
// 循环遍历所有 HTMLCollection 链接
for (let index = 0; index < links.length; index++) {
let link = links[index] // 访问每个锚标签元素
let hreflang = link.hreflang // 访问 hreflang 值
console.log(hreflang)
}
在上述语法中，document.getElementByTagName() 方法以"a"为参数，因此它返回所有元素，即 HTMLCollection 中的锚标签，并循环遍历它，我们从所有元素中获取所有 hreflang 属性值链接。
示例
在下面的示例中，我们使用 document.getElementByTagName() 方法获取链接的 hreflang 属性的值。
<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>
在上面的输出中，用户可以看到使用 document.getElementByTagName() 方法，我们获取了不同链接的 hreflang 属性值。
使用 document.querySelectorAll() 方法
在 JavaScript 中，document.querySelectorAll() 方法也可用于获取链接或锚标记的 hreflang 属性值。它以标记名称和 CSS 选择器作为参数，并返回类似于列表或数组的 NodeList。它包含所有元素作为该标记名称的节点元素对象，并且从每个对象中，我们还可以使用键"hreflang"获取 hreflang 的值。
使用 document.querySelectorAll()，我们可以获取所有具有 hreflang 作为属性的锚标记。在 document.getElementByTagName() 方法中，我们获取所有锚标记，无论它是否具有 hreflang 属性。
语法
// 获取所有具有 hreflang 属性的锚标记
let links = document.querySelectorAll('a[hreflang]')
在上述语法中，document.querySelectorAll() 方法以"a[hreflang]"为参数，因此它返回所有元素，即 NodeList 中包含 hreflang 属性的锚标记，并循环遍历它，我们从所有链接中获取所有 hreflang 属性值。
示例
在下面的示例中，我们使用 document.querySelectorAll() 方法获取链接的 hreflang 属性值。
<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>
在上面的输出中，使用 document.querySelectorAll 方法，我们获取所有具有 hreflang 属性的链接的 hreflang 属性值。
