如何在 JavaScript 中獲取連結 id 屬性的值？

在本教程中，我們將學習如何在 JavaScript 中獲取連結 id 屬性的值。

id 屬性為 HTML 元素儲存唯一值。元素的 id 必須是唯一的，並且其他任何元素都不應具有相同的 id。

連結的 id 屬性可以透過多種方式找到，在本教程中，我們將討論最流行的方法：

  • 使用 document.getElementById() 方法

  • 使用 document.getElementsByTagName() 方法

  • 使用 document.querySelectorAll() 方法

使用 document.getElementById() 方法

在 JavaScript 中，document.getElementById() 方法可用於獲取元素（如連結或錨點標記）的不同屬性值。它在引數中獲取元素的 id，並返回該元素的元素物件（在本例中，它是連結或錨點標記），然後我們可以使用鍵“id”從該物件中獲取該元素的 id。

使用者可以按照以下語法獲取連結的 id 屬性的值。

語法

document.getElementById('mylink').id

在上述語法中，“mylink”是連結（錨點標記）的 id，透過使用 document.getElementById 方法和“id”鍵，我們從該連結中獲取 id 屬性值。

示例

在下面的示例中，我們使用了 document.getElementById() 方法來獲取連結的 id 屬性的值。

<html>
<body>
   <div><a id="home_page" href="https://tutorialspoint.tw/" >tutorialspoint</a></div>
   <br />
   <div id="root"></div>
   <script>
      let myId = document.getElementById('home_page').id
      let root = document.getElementById('root')
      root.innerHTML = 'value of id attribute: ' +myId+ '<br>'
   </script>
</body>
</html>

在上面的輸出中，使用者可以看到，使用 document.getElementById 方法，我們獲得了不同連結的 id 屬性值。

使用 document.getElementsByTagName() 方法

在 JavaScript 中，document.getElementsByTagName() 方法可用於獲取連結或錨點標記的 id 屬性的值。它在引數中獲取標籤名稱，並返回一個 HTMLCollection，類似於列表或陣列。它包含該標籤名稱的所有元素物件，並且我們還可以使用鍵“id”從每個物件中獲取 id 的值。

語法

// 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 id from each element
   let id = links[index].id
   // use id
}

在上述語法中，document.getElementByTagName() 方法將“a”作為引數，因此它返回 HTMLCollection 中的所有元素（即錨點標記），並迴圈遍歷它，我們獲取所有連結的所有 id 屬性值並將其記錄到控制檯。

示例

在下面的示例中，我們使用了 document.getElementByTagName() 方法來獲取連結的 id 屬性的值。

<html>
<body>
   <h4>Get the value of the id attribute of a link in JavaScript using <i>document.getElementsByTagName()</i> method</h4>
   <div>
      <a id="mylink1" href="https://tutorialspoint.tw/" >Link 1</a><br>
      <a id="mylink2" 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 id = links[index].id
         
         // outputting the id value
         root.innerHTML+=
         'Link '+(index+1)+' id: '+id+'<br>'
      }
   </script>
</body>
</html>

在上面的輸出中，使用者可以看到，使用 document.getElementByTagName 方法，我們獲得了所有連結的 id 屬性值。

使用 document.querySelectorAll() 方法

在 JavaScript 中，document.querySelectorAll() 方法可用於獲取連結或錨點標記的 id 屬性的值。它在引數中獲取標籤名稱和 CSS 選擇器，並返回一個 NodeList，類似於列表或陣列。它包含該標籤名稱的所有元素作為節點元素物件，並且我們還可以使用鍵“id”從每個物件中獲取 id 的值。

在 document.getElementByTagName() 方法中，我們獲取所有錨點標記，無論它是否具有 id 屬性，但使用 document.querySelectorAll() 方法，我們只能獲取具有 id 屬性的連結或錨點標記。此方法不會選擇沒有 id 屬性的連結。

語法

document.querySelectorAll('a[id]')

在上述語法中，document.querySelectorAll() 方法將“a[id]”作為引數，因此它返回 NodeList 中的所有元素（即包含 id 屬性的錨點標記），並迴圈遍歷它，我們可以獲取所有 id 屬性值。

示例

在下面的示例中，我們使用了 document.querySelectorAll() 方法來獲取連結的 id 屬性的值。

<html>
<body>
   <div>
   <a id="mylink1" href="https://tutorialspoint.tw/" >Link 1</a><br>
   <a id="mylink2" href="https://www.tutorix.com/" >Link 2</a><br>
   <a href="https://tutorialspoint.tw/" >Link 3(no id)</a>
   </div>
   <br />
   <div id="root"></div>
   <script>
      let root = document.getElementById('root')
      let links = document.querySelectorAll('a[id]')
      for (let index=0; index<links.length; index++){
         let id=links[index].id
   
         // outputting the id value
         root.innerHTML+=
         'Link '+(index+1)+' id: '+id+'<br>'
      }
   </script>
</body>
</html>

在上面的輸出中，使用 document.querySelectorAll 方法，我們獲得了所有具有 id 屬性的連結的 id 屬性值。

更新於：2022年9月14日

9K+ 瀏覽量

開啟你的 職業生涯

透過完成課程獲得認證

開始學習
廣告