如何在 JavaScript 中使用 document.links？

在本教程中，讓我們討論如何在 JavaScript 中使用文件的連結。

document.links 屬性是一個只讀的 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.tw"> 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.tw"> 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 次檢視

開啟你的 職業生涯

透過完成課程獲得認證

開始學習
廣告

© . All rights reserved.