如何在 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.com"> 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.com"> 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 次浏览

开启你的 职业生涯

通过完成课程获得认证

开始学习
广告