如何在 JavaScript 中获取链接的 rel 属性值?
在本教程中，我们将学习如何在 JavaScript 中获取链接的 rel 属性值。
rel 属性表示当前文档或网站与链接文档或网站之间的关系。搜索引擎使用此属性来获取有关链接的更多信息，因此它对于网站的 SEO 非常重要。
rel 属性可以具有不同的值，如 alternative、author、external、nofollow 等；每个值都表示有关链接的不同信息。例如，"alternate"表示链接代表当前文档的替代版本。
使用 document.getElementById() 方法
在 JavaScript 中，document.getElementById() 方法可用于获取元素(如链接或锚标记)的不同属性值。它获取参数中元素的 id 并返回该元素的元素对象(在本例中，它是一个链接或锚标记)，从该对象中，我们可以使用键"rel"获取该元素的 rel 属性值。
用户可以按照以下语法获取链接的 rel 属性值。
语法
document.getElementById('mylink').rel
在上述语法中，"mylink"是链接的 id(锚标记)，通过使用 document.getElementById 方法和"rel"键，我们可以从该链接获取 rel 属性值。
示例
在下面的示例中，我们使用 document.getElementById() 方法获取链接的 rel 属性值。
<html> <body> <div><a id="link1" rel="nofolloww" href="https://www.tutorialspoint.com/" >tutorialspoint</a></div> <br /> <div id="result"></div> <script> let rel1 = document.getElementById('link1').rel let root = document.getElementById('result') root.innerHTML = 'value of rel attribute: ' +rel1+ '<br>' </script> </body> </html>
在上面的输出中，用户可以看到使用 document.getElementById 方法，我们获取了链接的 rel 属性值。
使用 document.getElementsByTagName() 方法
在 JavaScript 中，document.getElementsByTagName() 方法可用于获取链接或锚标记的 rel 属性值。它在参数中接受一个标记名称并返回一个 HTMLCollection，类似于列表或数组。它包含该标签名称的所有元素对象，并且从每个对象中，我们还可以使用键"rel"获取 rel 属性的值。
语法
// 获取所有锚标签
let links = document.getElementsByTagName('a')
// 循环遍历所有 HTMLCollection 链接
for (let index=0; index < links.length; index++){
// 从每个元素访问 rel 属性
let rel = links[index].rel
console.log(rel)
}
在上述语法中，document.getElementByTagName() 方法以"a"为参数，因此它返回所有元素，它是 HTMLCollection 中的锚标签，并循环遍历它，我们从所有链接获取 rel 属性值并将其记录到控制台。
示例
在下面的例子中，我们有使用 document.getElementByTagName() 方法从链接获取 rel 属性的值。
<html> <body> <div> <a rel="alternate" href="https://www.tutorialspoint.com/" >Link 1</a><br> <a rel="nofollow" href="https://www.tutorix.com/" >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 rel=links[index].rel root.innerHTML+='Link '+(index+1)+' rel attribute: '+rel+'<br>' } </script> </body> </html>
在上面的输出中，用户可以看到使用 document.getElementByTagName 方法，我们获取了所有链接的 rel 属性值。
使用 document.querySelectorAll() 方法
在 JavaScript 中，document.querySelectorAll() 方法可用于获取链接或锚标记的 rel 属性值。它在参数中接受标记名称和 CSS 选择器，并返回类似于列表或数组的 NodeList。它包含所有元素作为该标记名称的节点元素对象，并且从每个对象中，我们还可以使用键"rel"获取 rel 属性的值。
在 document.getElementByTagName() 方法中，我们获取所有锚标记，无论它是否具有 rel 属性，但使用 document.querySelectorAll() 方法只能获取具有 rel 属性的链接或锚标记。此方法不会选择没有 rel 属性的链接。
语法
document.querySelectorAll('a[rel]')
在上述语法中，document.querySelectorAll() 方法以"a[rel]"为参数，因此它返回所有元素，即 NodeList 中包含 rel 属性的锚标记，通过循环，我们可以获取所有 rel 属性值。
示例
在下面的示例中，我们使用 document.querySelectorAll() 方法获取链接的 rel 属性值。
<html> <body> <h4>Get the value of the rel attribute of a link in JavaScript using <i>document.querySelectorAll()</i> method</h4> <div> <a rel="alternate" href="https://www.tutorialspoint.com/" >Link 1</a><br> <a rel="nofollow" href="https://www.tutorialspoint.com/" >Link 2</a><br> <a href="https://www.tutorialspoint.com/" >Link 3(no rel)</a> </div> <br /> <div id="root"></div> <script> let root=document.getElementById('root') let links=document.querySelectorAll('a[rel]') for (let index=0; index<links.length; index++){ let rel=links[index].rel root.innerHTML +='Link '+(index+1)+' rel: '+rel+'<br>' } </script> </body> </html>
在上面的输出中，使用 document.querySelectorAll 方法，我们获取所有具有 rel 属性的链接的 rel 属性值。
