如何在 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.tw/" >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.tw/" >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.tw/" >Link 1</a><br>
   <a rel="nofollow" href="https://tutorialspoint.tw/" >Link 2</a><br>
   <a href="https://tutorialspoint.tw/" >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 屬性值。

更新於：2022年9月14日

2K+ 次瀏覽

啟動您的 職業生涯

完成課程後獲得認證

開始學習
廣告