数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法学如何在 JavaScript 中获取链接的 rel 属性值？
在本教程中，我们将学习如何在 JavaScript 中获取链接的 rel 属性值。
rel 属性表示当前文档或网站与链接文档或网站之间的关系。搜索引擎使用此属性来获取有关链接的更多信息，因此它对网站的 SEO 至关重要。
rel 属性可以具有不同的值，例如 alternate、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://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 属性的值。
语法
// getting all anchor tags
let links = document.getElementsByTagName('a')
// looping through all the HTMLCollection links
for (let index=0; index < links.length; index++){
// accessing the rel attribute from each element
let rel = links[index].rel
console.log(rel)
}
在上述语法中，document.getElementByTagName() 方法将“a”作为参数，因此它返回所有元素（即 HTMLCollection 中的锚点标签），并通过循环遍历它，我们获取所有链接的 rel 属性值并将其记录到控制台。
示例
在下面的示例中，我们使用了 document.getElementByTagName() 方法来获取链接的 rel 属性值。
<html> <body> <div> <a rel="alternate" href="https://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://tutorialspoint.com/" >Link 1</a><br> <a rel="nofollow" href="https://tutorialspoint.com/" >Link 2</a><br> <a href="https://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 属性值。
2K+ 次浏览
