如何在 JavaScript 中使用 document.anchors？

在本教程中，我們將討論如何在 JavaScript 中使用文件中的錨點。

相關的網路技術不再推薦此屬性。出於相容性原因，某些瀏覽器仍建議使用它。

document anchor 屬性是一個只讀功能，它返回所有錨點標籤。錨點標籤表示超連結的開始和結束。

錨點標籤屬性包括 name、href、rel、rev、title、urn 和 method。所有屬性都是可選的。但對於 document anchors 起作用，name 屬性是必須的。

使用錨點的屬性

讓我們學習如何使用錨點的屬性。

使用者可以按照以下語法來使用錨點的屬性。

語法

let anchorTag = document.anchors;
anchorTag.propertyName;

以上語法返回錨點節點和屬性。

屬性

  • length - length 是 HTML 集合中元素的數量。

返回值

anchor 屬性返回 HTML 錨點物件集合。該物件遵循原始碼順序。

示例

下面的程式嘗試訪問所有錨點元素的屬性。程式碼使用 try-catch 塊來處理訪問無效錨點標籤屬性時的錯誤。

在這個示例中，我們有四個錨點標籤。但該屬性僅返回兩個，因為其餘的錨點標籤沒有 name 屬性。

<html>
<body>
   <h2> Working with the document anchor's properties </h2>
   <a name="docAnc1"> Anchor1 </a><br><br>
   <a href="https://tutorialspoint.tw"> Anchor2 </a><br><br>
   <a name="docAnc3" href="https://tutorix.com"> Anchor3 </a><br><br>
   <a id="docAnc4"> Anchor4 </a><br><br>
   <div id="docAncBtnWrap">
      <button id="docAncBtn"> Click Me </button>
   </div>
   <p id="docAncOut"> </p>
   <script>
      var docAncInp = document.getElementById("docAncInp");
      var docAncOut = document.getElementById("docAncOut");
      var docAncBtnWrap = document.getElementById("docAncBtnWrap");
      var docAncBtn = document.getElementById("docAncBtn");
      var docAncInpStr = "";
      docAncBtn.onclick = function() {
         docAncInpStr = "";
         let docAncNode = document.anchors;
         
         //docAncBtnWrap.style.display = "none";
         try {
            docAncInpStr += "<br><br><b>The total valid anchors using length property = </b>" + docAncNode.length;
            docAncInpStr += "<br><br><b>The first valid anchor innerHTML = </b>" + docAncNode[0].innerHTML;
            docAncInpStr += "<br><br><b>The first valid anchor href = </b>" + docAncNode[0].href;
            docAncInpStr += "<br><br><b>The first valid anchor inner text = </b>" + docAncNode[0].innerText;
            docAncInpStr += "<br><br><b>The second valid anchor name = </b>" + docAncNode[1].name;
            docAncInpStr += "<br><br><b>The second valid anchor text = </b>" + docAncNode[1].text;
         } catch (e) {
            docAncInpStr += "<br><br>" + e;
         }
         docAncOut.innerHTML = docAncInpStr;
      };
   </script>
</body>
</html>

使用錨點的方法

讓我們學習如何使用錨點的方法。

使用者可以按照以下語法來使用錨點的方法。

語法

let anchorTag = document.anchors;
anchorTag.methodName;

以上語法返回錨點節點和方法。

方法

  • [index] - index 方法返回指定位置的元素。索引從零開始。如果索引超出範圍，則該方法返回“null”。

  • item(index) - 返回指定位置的元素。索引從零開始。如果索引超出範圍，則該方法返回“null”。

  • namedItem(id) - 返回具有指定 id 的元素。如果 id 錯誤，則該方法返回“null”。

示例

下面的程式嘗試使用可用的方法來訪問錨點元素的屬性。

<html>
<body>
   <h2> Working with the document anchor's methods </h2>
   <a name="ancMeth" href="https://tutorialspoint.tw"> Anchor </a> <br> <br>
   <div id="ancMethBtnWrap">
      <button id="ancMethBtn"> Click Me </button>
   </div>
   <p id="ancMethOut"></p>
   <script>
      var ancMethInp = document.getElementById("ancMethInp");
      var ancMethOut = document.getElementById("ancMethOut");
      var ancMethBtnWrap = document.getElementById("ancMethBtnWrap");
      var ancMethBtn = document.getElementById("ancMethBtn");
      var ancMethInpStr = "";
      ancMethBtn.onclick = function() {
         ancMethInpStr = "";
         let ancMethNode = document.anchors;
         
         //ancMethBtnWrap.style.display = "none";
         try {
            ancMethInpStr += "<br><br><b>The anchor text using [index] = </b>" + ancMethNode[0].text;
            ancMethInpStr += "<br><br><b>The anchor href using namedItem() </b>" + ancMethNode.namedItem("ancMeth").href;
            ancMethInpStr += "<br><br><b>The anchor name using item() </b>" + ancMethNode.item(0).name;
         } catch (e) {
            ancMethInpStr += "<br><br>" + e;
         }
         ancMethOut.innerHTML = ancMethInpStr;
      };
   </script>
</body>
</html>

本教程教我們如何使用錨點標籤的屬性和方法。所有屬性和方法都是 JavaScript 內建的。如您所知，我們不建議使用此屬性。您可以使用 document links 屬性作為替代。

更新於: 2022年11月15日

683 次瀏覽

開啟你的 職業生涯

透過完成課程獲得認證

開始學習
廣告