如何在JavaScript中取得連結的目標屬性的值？-html教學-PHP中文網

使用目標屬性

文法

範例

使用 getElementsByTagName() 方法

使用querySelectorAll()方法

首頁

web前端

html教學

如何在JavaScript中取得連結的目標屬性的值？

王林

Sep 03, 2023 am 09:33 AM

如何在JavaScript中取得連結的目標屬性的值？

在本教學中，我們將學習如何在 JavaScript 中取得連結的目標屬性的值。

目標屬性指定在哪裡開啟連結的文件或頁面。

預設情況下，其值設定為“_self”，這表示連結的文件應在同一視窗或標籤中開啟。它還可以具有“_blank”、“_self”、“_parent”、“_top”和“frame_name”等值，其中每個值定義開啟連結文件的不同位置。

使用目標屬性

要取得 JavaScript 中連結的目標屬性值，請使用目標屬性。 target 屬性用於設定連結文件的開啟位置，即在同一視窗、新視窗或同一框架等。

我們可以使用 document.getElementById() 方法來取得 HTML 元素。此方法以元素的 id 作為參數並傳回一個元素物件。從該物件中，我們可以使用「target」屬性來取得該元素的目標屬性值。

文法

document.getElementById('mylink').target

登入後複製

在上面的語法中，「mylink」是連結的 id（例如錨標記），透過使用 document.getElementById() 方法和「target」屬性，我們可以從該連結取得目標屬性值。

範例 1

您可以嘗試執行以下程式碼來取得連結的目標屬性的值 -

<!DOCTYPE html>
<html>
<body>
   <p><a id="anchorid" rel="nofollow" target= "_blank" 
   href="https://www.tutorialspoint.com/">tutorialspoint</a></p>
   <script>
      var myVal = document.getElementById("anchorid").target;
      document.write("Value of target attribute: "+myVal);
   </script>
</body>
</html>

登入後複製

範例 2

在下面的範例中，我們使用 document.getElementById() 方法和 target 屬性來取得兩個不同連結的 target 屬性的值。

<html>
<body>
   <div>
      <p> Click on "Get target atribute" button to diisplay the target 
      attribute of links </p> 
      <a id="link1" target="_self" href="https://www.tutorialspoint.com/" 
      >Link 1</a><br>
      <a id="link2" target="_blank" href="https://www.tutorix.com/" >Link 
      2</a>
   </div>
   <br />
    
   <div id="root"> </div>
   <button onclick="getLink()"> Get target atrribute </button> 
   <script>
      function getLink(){
         // getting the target attribute value of anchor tags
         let target1 = document.getElementById('link1').target
         let target2 = document.getElementById('link2').target
         // outputting the target values
         let root = document.getElementById('root')
         root.innerHTML = 'Link 1 target attribute: ' + target1 + '<br>'
         root.innerHTML += 'Link 2 target attribute: ' + target2 + '<br>'
      }
   </script>
</body>
</html>

登入後複製

使用 getElementsByTagName() 方法

在 JavaScript 中，document.getElementsByTagName() 方法可用來取得連結或錨標記的目標屬性的值。它在參數中接受標籤名稱並傳回 HTMLCollection，類似於清單或陣列。它包含該標籤名稱的所有元素對象，並且從每個對像中，我們也可以使用屬性“target”來取得目標屬性的值。

文法

// getting all anchor tags
let links = document.getElementsByTagName('a')
// looping through all the HTMLCollection links
for (let index=0; index<links.length; index++){
   // accessing the target attribute from each element
   let target = links[index].target
   console.log(target)
}

登入後複製

在上面的語法中，document.getElementByTagName() 方法以'a' 作為參數，因此它返回HTMLCollection 中作為錨標記的所有元素，並循環遍歷它，我們從所有元素中獲取目標屬性值連結和控制台記錄它。

範例 3

在下面的範例中，我們使用 document.getElementByTagName() 方法從連結取得目標屬性的值。

<html>
<body>
   <p>
      Get the value of the target attribute of a link in JavaScript using 
      <i> document.getElementsByTagName() </i> method
   </p>
   <div>
      <a target="_self" href="https://www.tutorialspoint.com/" >Link 
      1</a><br>
      <a target="_blank" href="https://www.tutorix.com/" >Link 2</a>
   </div>
   <br />
    
   <div id="root"> </div>
   <button onclick="getLink()"> Get target attribute </button> 
   <script>
      function getLink(){
         let root=document.getElementById('root')
         let links=document.getElementsByTagName('a')
         for (let index=0; index<links.length; index++) {
            let target=links[index].target 
            root.innerHTML+=
            'Link '+(index+1)+' target: '+target+'<br>'
         }
      }
   </script>
</body>
</html>

登入後複製

使用querySelectorAll()方法

在 JavaScript 中，可以使用 document.querySelectorAll() 方法來取得連結或錨標記的目標屬性值。

文法

以下是取得所有具有目標屬性的錨標記的語法 -

document.querySelectorAll('a[target]')

登入後複製

在上述語法中，document.querySelectorAll() 方法採用「a[target]」作為參數。因此，它傳回所有元素，這是一個NodeList中包含目標屬性的錨標記，循環遍歷它，我們可以得到所有目標屬性值。

範例

在下面的範例中，我們使用 document.querySelectorAll() 方法來取得連結的 target 屬性的值。

<html>
<body>
   <p>
      Get the value of the target attribute of a link in JavaScript using 
      <i> document.querySelectorAll() </i> method
   </p>
   <div>
      <a target="_self" href="https://www.tutorialspoint.com/" >Link 
      1</a><br>
      <a target="_blank" href="https://www.tutorix.com/" >Link 2</a><br>
      <a href="https://www.tutorialspoint.com/" >Link 3(no target)</a>
   </div>
   <br />
   <div id="root"> </div>
   <button onclick="getLink()"> Get target Link </button> 
   <script>
      function getLink(){
         let root=document.getElementById('root')
         let links=document.querySelectorAll('a[target]')
         for (let index=0; index<links.length; index++) {
            let target=links[index].target 
            root.innerHTML +=
            'Link '+(index+1)+' target: '+target+'<br>'
         }
      }
   </script>
</body>
</html>

登入後複製

以上是如何在JavaScript中取得連結的目標屬性的值？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn