如何使用 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 变量，并在其中以 HTMLCollecton 的形式获取所有锚点；然后我们使用了 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 次查看

启动你的 职业生涯

通过完成课程获得认证

开始学习
广告