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

首頁

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中文網其他相關文章！

陳述

本文轉載於：tutorialspoint。如有侵權，請聯絡admin@php.cn刪除

HTML的角色：構建Web內容Apr 11, 2025 am 12:12 AM

HTML的作用是通過標籤和屬性定義網頁的結構和內容。 1.HTML通過到、等標籤組織內容，使其易於閱讀和理解。 2.使用語義化標籤如、等增強可訪問性和SEO。 3.優化HTML代碼可以提高網頁加載速度和用戶體驗。

HTML和代碼：仔細觀察術語Apr 10, 2025 am 09:28 AM

htmlisaspecifictypefodyfocusedonstructuringwebcontent，而“代碼” badlyLyCludEslanguagesLikeLikejavascriptandPytyPythonForFunctionality.1）htmldefineswebpagertuctureduseTags.2）“代碼”代碼“ code” code code code codeSpassSesseseseseseseseAwiderRangeLangeLangeforLageforLogageforLogicIctInterract

HTML，CSS和JavaScript：Web開發人員的基本工具Apr 09, 2025 am 12:12 AM

HTML、CSS和JavaScript是Web開發的三大支柱。 1.HTML定義網頁結構，使用標籤如、等。 2.CSS控製網頁樣式，使用選擇器和屬性如color、font-size等。 3.JavaScript實現動態效果和交互，通過事件監聽和DOM操作。

HTML，CSS和JavaScript的角色：核心職責Apr 08, 2025 pm 07:05 PM

HTML定義網頁結構，CSS負責樣式和佈局，JavaScript賦予動態交互。三者在網頁開發中各司其職，共同構建豐富多彩的網站。

HTML容易為初學者學習嗎？Apr 07, 2025 am 12:11 AM

HTML適合初學者學習，因為它簡單易學且能快速看到成果。 1)HTML的學習曲線平緩，易於上手。 2)只需掌握基本標籤即可開始創建網頁。 3)靈活性高，可與CSS和JavaScript結合使用。 4)豐富的學習資源和現代工具支持學習過程。

HTML中起始標籤的示例是什麼？Apr 06, 2025 am 12:04 AM

AnexampleOfAstartingTaginHtmlis，beginSaparagraph.startingTagSareEssentialInhtmlastheyInitiateEllements，defiteTheeTheErtypes，andarecrucialforsstructuringwebpages wepages webpages andConstructingthedom。