如何使用 JavaScript 显示文档中的链接数量？

我们使用document对象的links属性来使用JavaScript显示文档中的链接数量。document 对象是 DOM 的一部分，对应于浏览器已加载的当前网页。它包含有关浏览器和网页状态的所有信息。

links是document对象的属性，它返回HTML文档中所有超链接的列表。超链接可能看起来像这样：

"https://www.tutorialpoints.com/php"

document 对象的 links 属性列出所有具有 href 属性和 <area>、<a> 标签的 HTML 元素。

锚点标签 <a> 用于在 HTML 中定义超链接。它包含 href 属性，该属性可以包含指向其他页面、文件等的超链接。

以下是一些示例：

<a href="https://tutorialspoint.com/php">PHP</a>
<a href="https://tutorialspoint.com/html5">HTML</a>

<area> 标签用于在图像内创建可点击区域。它包含各种属性，例如shape、coords、href、alt等，用于定位图像上的可点击区域。它始终用于map标签内。

这是一个例子：

<area shape="rect" coords="184,6,253,27" href="https://mozilla.org" target="_blank" alt="Mozilla" />

使用 Document 的links属性

它是 document 对象的一个属性。它包含文档中链接的列表及其相关属性。我们可以使用length属性获取文档中链接的总数。

要获取文档中链接的总数，我们可以遵循以下语法。

语法

var val = document.links.length;

这里val是文档中链接的总数。

让我们来看一个例子以便更好地理解。

示例 1

在下面的代码片段中，我们在 HTML 文档中添加了 3 个超链接，我们将使用document.links显示文档中的链接数量。

<!DOCTYPE html>
<html>
<body>
   <a href="https://tutorialspoint.com/php">PHP</a>
   <br>
   <a href="https://tutorialspoint.com/java/">Java</a>
   <br>
   <a href="https://tutorialspoint.com/html5/">HTML</a>
   <br>
   <a href="https://tutorialspoint.com/css/">CSS</a>
   <script>
      var val = document.links.length;
      document.write("<br>Number of links in the document: "+val);
   </script>
</body>
</html>

它打印文档中的链接数量。

返回的链接列表可以迭代，并且它的属性也可以访问。可以使用随机访问运算符 [] 访问任何链接，并且它的 href 等属性可以使用点 (.) 运算符链接。

语法

var ithURL = document.links[i].href

这将访问 HTML 文档中的第 i 个链接，并将其保存在ithURL变量中。

示例 2

在下面的代码片段中，我们将创建一个按钮，该按钮首先提取 HTML 文档中存在的所有链接的列表，然后迭代该列表以记录 HTML body 中的每个超链接。

<!DOCTYPE html>
<html>
<body>
   <a href="https://tutorialspoint.com/php">PHP</a>
   <br>
   <a href="https://tutorialspoint.com/java/">Java</a>
   <br>
   <a href="https://tutorialspoint.com/html5/">HTML</a>
   <br>
   <a href="https://tutorialspoint.com/css/">CSS</a>
   <br><br>
   <button onclick = "findLinks()"> Find Links ! </button>
   <div id = "result"></div>
   <script>
      var links = document.links;
      var text = "";
      var resultDiv = document.getElementById("result");
      function findLinks(){
         text += "<br>The number of links in the document is : " + links.length
         text += "<br>These are the " + links.length + " links in the document: <br><br>";
         for(var i = 0 ; i < links.length ; i++){
            text += links[i].href + "<br>";
         }
         resultDiv.innerHTML = text;
      }
   </script>
</body>
</html>

“查找链接”按钮触发findLinks()函数。在函数内部，我们使用 for 循环迭代列表并使用 href 属性在屏幕上记录 URL。

使用 Document links 的item属性

另一种方法是使用document.links的 item 属性。

var ithURL = document.links.item(i).href

它提取文档中第i个超链接，并将其保存在ithURL变量中。

JavaScript还可以根据其 ID 从 HTML 文档中提取超链接。

var myURL = document.links.nameItem("YOUR_ID").href

让我们通过一个例子更好地理解这两个属性：

示例 3

在下面的代码片段中，我们在文档中添加了一个新的超链接，并为其提供了 ID。然后，我们使用此 ID 来提取相关的超链接。

<!DOCTYPE html>
<html>
<body>
   <a id = "mylink" href="https://tutorialspoint.com">Link to my site</a>
   <br><br>
   Link to courses:
   <a href="https://tutorialspoint.com/php">PHP</a>
   <br>
   <a href="https://tutorialspoint.com/java/">Java</a>
   <br>
   <a href="https://tutorialspoint.com/html5/">HTML</a>
   <br>
   <a href="https://tutorialspoint.com/css/">CSS</a>
   <br><br>
   <button onclick = "findLinks()"> Find Links ! </button>
   <div id = "result"></div>
   <script>
      var links = document.links;
      var text = "";
      var resultDiv = document.getElementById("result");
      function findLinks(){
         text += "<br>The number of links in the document is : " + links.length
         text += "<br>These are the links in the document: <br><br>";
         text += links.namedItem("mylink").href + "<br>";
         for(var i = 0 ; i < links.length ; i++){
            if(links.item(i).id == "mylink") continue;
               <br><br>
               text += links.item(i).href + "<br>";
         }
         resultDiv.innerHTML = text;
      }
   </script>
</body>
</html>

“查找链接！”按钮触发findLinks()JavaScript 函数。因为我们不想记录重复的超链接，所以需要跳过 ID 属性等于“mylink”的链接。链接的id属性用于该比较。

结论

document 对象的 links 属性对于操作 HTML 文档中存在的超链接非常有用。各种带有 ID 的超链接可以用作 Web 应用程序中的标准，提供便利。

更新于：2022年9月21日

627 次浏览

启动您的职业生涯

完成课程获得认证

开始学习
广告