如何在 JavaScript 中获取文档中的特定锚点?


在本文中,我们将学习如何在 JavaScript 中获取文档中的特定锚点。

Javascript 锚点标签遵循类似数组的结构。当我们尝试显示特定的锚点标签时,我们必须使用document.anchors.innerHTML方法。此方法的工作方式与用于显示特定元素的数组方法相同。

为了更好地理解,让我们了解一下 JavaScript 中锚点标签的用法和语法。

语法

获取特定锚点标签的语法如下所示。

document.anchors[i].innerHTML or document.getElementsByTagName(“a”)[i].innerHTML

示例 1

下面是一个获取特定锚点标签的示例程序。

<!DOCTYPE html>
<html>
<head>
   <title>To get a particular anchor in a document</title>
</head>
<body style="text-align : center">
   <h1>To get a particular anchor in a document.</h1>
   <a name="google">Google</a><br>
   <a name="facebook">Facebook</a><br>
   <a name="youtube">Youtube</a><br>
   <p id="text1"></p>
   <script>
      document.getElementById("text1").innerHTML = "The second anchor element is : "+document.anchors[1].innerHTML;
   </script>
</body>
</html>

执行上述代码后,将生成以下输出。

示例 2

访问锚点标签内容的另一种方法是通过document.getElementsByTagName(“a”)[i].innerHTML

<!DOCTYPE html>
<html>
<head>
   <title>To get a particular anchor in a document</title>
</head>
   <body style="text-align : center">
      <h1>To get a particular anchor in a document.</h1>
      <a name="google">Google</a><br>
      <a name="facebook">Facebook</a><br>
      <a name="youtube">Youtube</a><br>
      <p id="text1"></p>
      <script>
         document.getElementById("text1").innerHTML = "The third anchor element is : "+document.getElementByTagName("a")[2].innerHTML;
      </script>
   </body>
</html>

执行上述代码后,将生成以下输出。

示例 3

下面是一个访问锚点标签内属性和内容的示例程序。

<!DOCTYPE html>
<html>
<head>
   <title>To get a particular anchor in a document</title>
</head>
<body style="text-align : center">
   <h1>To get a particular anchor in a document.</h1>
   <a name="google" href="https://www.google.com/" title="Google Home Page">Google</a><br>
   <a name="facebook" href="https://127.0.0.1/" title="Facebook Home Page">Facebook</a><br>
   <a name="youtube" href="https://www.youtube.com/" title="Youtube Home Page">Youtube</a><br>
   <p id="text1"></p>
   <script>
      document.getElementById("text1").innerHTML = "The third anchor element is : "+document.getElementsByTagName("a")[2].innerHTML+"<br/>"+"The name for : the third anchor element is "+document.getElementsByTagName("a")[2].getAttribute("name")+"<br/> "+"The link for the third anchor tag element is : "+document.getElementsByTagName("a")[2].getAttribute("href")+"<br/> "+"The Title for the third anchor tag element link is : "+document.getElementsByTagName("a")[2].getAttribute("title");
   </script>
</body>
</html>

执行上述代码后,将生成以下输出。

更新于:2022-12-08

1K+ 次浏览

启动您的 职业生涯

完成课程后获得认证

开始学习
广告