如何使用 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.tw/php" name="PHP">PHP</a><br>
   <a href="https://tutorialspoint.tw/java/"
   name="Java">Java</a><br>
   <a href="https://tutorialspoint.tw/html5/"
   name="HTML5">HTML5</a><br>
   <a href="https://tutorialspoint.tw/css/" name="CSS">CSS</a><br>
   <a href="https://tutorialspoint.tw/javascript/"
   name="JavScript">JavaScript</a><br>
   <a href="https://tutorialspoint.tw/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.tw/php" name="PHP">
   PHP    
   <a href="https://tutorialspoint.tw/java/" name="Java">Java</a>
   </a><br>
   <a href="https://tutorialspoint.tw/html5/" name="HTML5">
   HTML5    
   <a href="https://tutorialspoint.tw/css/" name="CSS">CSS</a>
   </a><br>
   <a href="https://tutorialspoint.tw/javascript/" name="JavScript">
   JavaScript    
   <a href="https://tutorialspoint.tw/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.tw/php" name="PHP">PHP</a>
   </button>
   <button>
      <a href="https://tutorialspoint.tw/java/"
      name="Java">Java</a>
   </button>
   <button>
      <a href="https://tutorialspoint.tw/html5/"
      name="HTML5">HTML5</a>
   </button>
   <button>
      <a href="https://tutorialspoint.tw/css/" name="CSS">CSS</a>
   </button>
   <button>
      <a href="https://tutorialspoint.tw/python"
      name="Python">Python</a>
   </button>
   <button>
      <a href="https://tutorialspoint.tw/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 次瀏覽

啟動您的職業生涯

完成課程獲得認證

開始學習
廣告
© . All rights reserved.