如何在 JavaScript 中使用 document.links？

在本教程中，我们将讨论如何在 JavaScript 中使用文档的链接。

document link 属性是一个只读的 DOM 1 级特性，它返回所有链接。links 属性提供了所有带有 href 属性的锚元素和区域标签。

使用 document.links 属性

让我们学习如何使用链接的属性。

用户可以按照以下语法来使用链接的属性。

语法

let links = document.links;
links.propertyName;

上述语法返回所有锚标签、区域标签和属性。

属性

  • length - 长度是 HTML 集合中元素的数量。

返回值

link 属性返回 HTML 链接对象集合。该对象遵循源代码顺序。

示例

下面的程序尝试访问所有链接属性。代码使用 try-catch 块来处理访问无效链接属性时的错误。

在本例中，我们有四个链接。但该属性仅返回两个，因为其余链接没有 href 属性。

在本例中，锚链接 link1 和区域链接 link1 是有效的链接。我们使用 [index] 方法显示有效锚链接的内部 HTML、href 和内部文本属性，以及有效区域标签的 href 属性。

<html>
<body>
   <h2> Working with the document link's properties </h2>
   <a name="docAncLink1"> Anchor Link1 </a> <br> <br>
   <a href="https://tutorialspoint.com"> Anchor Link2</a> <br> <br>
   <area name="docAreaLink1" href="https://docAreaLink1.com"> Area Link1 </area> <br> <br>
   <area id="docAreaLink2"> Area Link2 </area> <br> <br>
   <div id="docLinkBtnWrap">
      <button id="docLinkBtn"> Click Me </button>
   </div>
   <p id="docLinkOut"> </p>
   <script>
      var docLinkInp = document.getElementById("docLinkInp");
      var docLinkOut = document.getElementById("docLinkOut");
      var docLinkBtnWrap = document.getElementById("docLinkBtnWrap");
      var docLinkBtn = document.getElementById("docLinkBtn");
      var docLinkInpStr = "";
      docLinkBtn.onclick = function() {
         docLinkInpStr = "";
         let docLinkNode = document.links;
         
         //docLinkBtnWrap.style.display = "none";
         try {
            docLinkInpStr += "<br><br><b>The total valid links using length property = </b>" + docLinkNode.length;
            docLinkInpStr += "<br><br><b>The first valid link innerHTML = </b>" + docLinkNode[0].innerHTML;
            docLinkInpStr += "<br><br><b>The first valid link href = </b>" + docLinkNode[0].href;
            docLinkInpStr += "<br><br><b>The first valid link inner text = </b>" + docLinkNode[0].innerText;
            docLinkInpStr += "<br><br><b>The second valid link href = </b>" + docLinkNode[1].href;
         } catch (e) {
            docLinkInpStr += "<br><br>" + e;
         }
         docLinkOut.innerHTML = docLinkInpStr;
      };
   </script>
</body>
</html>

使用 document.links 方法

让我们学习如何使用链接的方法。

用户可以按照以下语法来使用链接的方法。

语法

let links = document.links;
links.methodName;

上述语法返回所有锚标签、区域标签和方法。

方法

  • [index] - index 方法返回特定位置的元素。索引从零开始。如果索引超出范围，则该方法返回“null”。

  • item(index) - 返回特定位置的元素。索引从零开始。如果索引超出范围，则该方法返回“null”。

  • namedItem(id) - 返回具有特定 id 的元素。如果 id 错误，则该方法返回“null”。

示例

下面的程序尝试使用可用的方法访问链接的属性。

在本程序中，锚链接和区域链接是有效的。我们使用 [index] 方法访问锚链接的文本。namedItem("name") 方法返回锚链接 href 属性的值。item(index) 方法返回锚链接名称。

namedItem("name") 和 item(index) 返回区域链接的 href 值。

<html>
<body>
   <h2> Work with the document link's methods </h2>
   <a name="linkAnchorMeth" href="https://tutorialspoint.com"> Anchor Link </a> <br> <br>
   <area name="linkAreaMeth" href="https://totorix.com"> Area Link </a> <br> <br>
   <div id="linkMethBtnWrap">
      <button id="linkMethBtn"> Click Me </button>
   </div>
   <p id="linkMethOut"> </p>
   <script>
      var linkMethInp = document.getElementById("linkMethInp");
      var linkMethOut = document.getElementById("linkMethOut");
      var linkMethBtnWrap = document.getElementById("linkMethBtnWrap");
      var linkMethBtn = document.getElementById("linkMethBtn");
      var linkMethInpStr = "";
      linkMethBtn.onclick = function() {
         linkMethInpStr = "";
         let linkMethNode = document.links;
         
         //linkMethBtnWrap.style.display = "none";
         try {
            linkMethInpStr += "<br><br><b>The anchor link text using [index] = </b>" + linkMethNode[0].text;
            linkMethInpStr += "<br><br><b>The anchor link href using namedItem() </b>" + linkMethNode.namedItem("linkAnchorMeth").href;
            linkMethInpStr += "<br><br><b>The anchor link name using item() </b>" + linkMethNode.item(0).name;
            linkMethInpStr += "<br><br><b>The area link href using [index] = </b>" + linkMethNode[1].href;
            linkMethInpStr += "<br><br><b>The area link href using namedItem() </b>" + linkMethNode.namedItem("linkAreaMeth").href;
            linkMethInpStr += "<br><br><b>The area link href using item() </b>" + linkMethNode.item(1).href;
         } catch (e) {
            linkMethInpStr += "<br><br>" + e;
         }
         linkMethOut.innerHTML = linkMethInpStr;
      };
   </script>
</body>
</html>

本教程教会我们如何使用链接的属性和方法。所有属性和方法都是 JavaScript 内置的。

更新于: 2022-11-15

799 次浏览

开启你的 职业生涯

通过完成课程获得认证

开始学习
广告