如何使用 JavaScript 查找锚点的数量？

在本教程中，我们将学习如何使用 JavaScript 查找 HTML 文档中使用的锚点数量。有时，在网页开发过程中，开发人员可能需要使用多个锚点为网页上的不同按钮添加多个链接。在这种情况下，如果要查找锚元素的数量，可以使用**anchors** 属性。

JavaScript 允许我们使用**anchors** 属性来计算 HTML 文档中锚点（<a> 元素）的数量。

**注意** - document.anchors 属性已弃用，不再推荐使用。

让我们详细讨论**anchors** 属性。

Document.anchors

我们将使用**anchors** 属性来获取文档中锚点（<a> 元素）的数量。**anchors** 属性将返回一个 HTMLCollection，其中包含所有锚点，这些锚点像数组元素一样存储在其中；然后使用**length** 属性可以获取集合的长度，这将是文档中锚点的数量。

语法

let a = document.anchors;
let b = a.length;

在上面的语法中，我们首先在变量 a 中获取一个 HTMLCollection，然后我们使用集合上的 length 属性来获取文档中锚点的数量。

步骤

  • **步骤 1** - 在第一步中，我们将在 HTML 文档中定义多个锚点。
  • **步骤 2** - 在这一步中，我们将使用上述语法来获取集合及其长度，这将是文档中锚点的数量。
  • **步骤 3** - 第三步将在用户屏幕上以数字形式显示结果或锚点的数量。

让我们借助程序示例来讨论它。

示例 1

下面的示例将解释如何使用 anchors 属性使用 JavaScript 获取 HTML 文档中**锚点**的数量：

<html>
<body>
   <h3>Find the number of anchors</h3>
   <a href="https://tutorialspoint.com/php" name="PHP">PHP</a><br>
   <a href="https://tutorialspoint.com/java/"
   name="Java">Java</a><br>
   <a href="https://tutorialspoint.com/html5/"
   name="HTML5">HTML5</a><br>
   <a href="https://tutorialspoint.com/css/" name="CSS">CSS</a><br>
   <a href="https://tutorialspoint.com/javascript/"
   name="JavScript">JavaScript</a><br>
   <a href="https://tutorialspoint.com/python"
   name="Python">Python</a><br>
   <p id="result"></p>
   <script>
      let anchors = document.anchors;
      let noOfAnchors = anchors.length;
      document.getElementById("result").innerHTML = "The number of anchors in the document: <b>" + noOfAnchors + "</b>";
   </script>
</body>
</html>

在上面的示例中，我们创建了一个名为**anchors** 的 JavaScript 变量，并将所有锚点以 HTMLCollection 的形式获取到其中；然后我们使用了 length 属性来获取文档中锚点的数量并将其存储在**noOfAnchors** 变量中。

让我们看另一个示例，看看如果锚点相互嵌套，**anchors** 属性的行为。

示例 2

下面的代码示例将显示当锚点相互嵌套时**anchors** 属性的行为。

<html>
<body>
   <h3>Find the number of anchors with JavaScript</h3>
   <a href="https://tutorialspoint.com/php" name="PHP">
   PHP    
   <a href="https://tutorialspoint.com/java/" name="Java">Java</a>
   </a><br>
   <a href="https://tutorialspoint.com/html5/" name="HTML5">
   HTML5    
   <a href="https://tutorialspoint.com/css/" name="CSS">CSS</a>
   </a><br>
   <a href="https://tutorialspoint.com/javascript/" name="JavScript">
   JavaScript    
   <a href="https://tutorialspoint.com/python"
   name="Python">Python</a>
   </a>
   <p id="result"></p>
   <script>
      let anchors = document.anchors;
      let noOfAnchors = anchors.length;
      document.getElementById("result").innerHTML = "The number of anchors in the document: <b>" + noOfAnchors + "</b>";
   </script>
</body>
</html>

在这个示例中，我们看到当锚点嵌套时，**anchors** 属性的行为与之前看到的一样。在这里，即使在嵌套添加锚点后，总锚点数量仍然是 6，与之前的案例相同，这意味着 anchors 属性返回文档中锚点的数量，无论它们是嵌套还是彼此相邻。

**注意** - 在上面的示例中，** ** 用于在 HTML 元素内的文本之间提供空格。

让我们再看一个代码示例，看看如果我们在不同的按钮内使用多个锚点，anchors 属性的行为。

示例 3

下面的示例将说明当在按钮内使用锚点时 anchors 属性的行为：

<html>
<body>
   <h3>Find the number of anchors with JavaScript</h3>
   <button>
      <a href="https://tutorialspoint.com/php" name="PHP">PHP</a>
   </button>
   <button>
      <a href="https://tutorialspoint.com/java/"
      name="Java">Java</a>
   </button>
   <button>
      <a href="https://tutorialspoint.com/html5/"
      name="HTML5">HTML5</a>
   </button>
   <button>
      <a href="https://tutorialspoint.com/css/" name="CSS">CSS</a>
   </button>
   <button>
      <a href="https://tutorialspoint.com/python"
      name="Python">Python</a>
   </button>
   <button>
      <a href="https://tutorialspoint.com/javascript/"
      name="JavScript">JavaScript</a>
   </button>
   <p id="result"></p>
   <script>
      let anchors = document.anchors;
      let noOfAnchors = anchors.length;
      document.getElementById("result").innerHTML = "The number of anchors in the document: <b>" + noOfAnchors + "</b>";
   </script>
</body>
</html>

在上面的示例中，我们看到了当在按钮标签内使用锚点时**anchors** 属性的行为，这与上面讨论的两个示例相似。

在本教程中，我们学习了 JavaScript 的**anchors** 属性，如果按照教程中上面讨论的语法使用，它可以用来获取 HTML 文档中存在的锚点的数量。我们还看到了代码实现，以检查当锚点在按钮标签内以及以嵌套形式相互嵌套使用时 anchors 属性的行为。

更新于：2022年10月31日

178 次浏览

启动您的职业生涯

完成课程获得认证

开始学习
广告