如何在 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://#/" 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+ 次瀏覽

啟動您的 職業生涯

完成課程後獲得認證

開始學習
廣告
© . All rights reserved.