如何在 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.com/" >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.com/" >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.com/" >Link 1</a><br>
   <a id="mylink2" href="https://www.tutorix.com/" >Link 2</a><br>
   <a href="https://tutorialspoint.com/" >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+ 浏览量

开启你的 职业生涯

通过完成课程获得认证

开始学习
广告