資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何在 JavaScript 中獲取連結的 target 屬性值？
在本教程中，我們將學習如何在 JavaScript 中獲取連結的 target 屬性值。
target 屬性指定在何處開啟連結的文件或頁面。
預設情況下，其值設定為“_self”，這意味著連結的文件應在同一視窗或選項卡中開啟。它還可以具有“_blank”、“_self”、“_parent”、“_top”和“frame_name”等值，其中每個值都定義了開啟連結文件的不同位置。
使用 target 屬性
要在 JavaScript 中獲取連結的 target 屬性值，請使用 target 屬性。target 屬性用於設定您希望連結的文件在何處開啟，即在同一視窗或新視窗或同一框架等。
我們可以使用 document.getElementById() 方法獲取 HTML 元素。此方法將元素的 id 作為引數，並返回一個元素物件。從該物件中，我們可以使用“target”屬性獲取該元素的 target 屬性值。
語法
document.getElementById('mylink').target
在上述語法中，“mylink”是連結的 id（例如錨標記），透過使用 document.getElementById() 方法和“target”屬性，我們從該連結獲取 target 屬性值。
示例 1
您可以嘗試執行以下程式碼以獲取連結的 target 屬性值：
<!DOCTYPE html> <html> <body> <p><a id="anchorid" rel="nofollow" target= "_blank" href="https://tutorialspoint.tw/">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://tutorialspoint.tw/" >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() 方法獲取連結或錨標記的 target 屬性值。它在引數中獲取一個標記名稱，並返回一個 HTMLCollection，類似於列表或陣列。它包含該標記名稱的所有元素物件，並且從每個物件中，我們還可以使用屬性“target”獲取 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 中的所有錨標記元素，並迴圈遍歷它，我們從所有連結獲取 target 屬性值並將其記錄到控制檯。
示例 3
在下面的示例中，我們使用了 document.getElementByTagName() 方法來獲取連結的 target 屬性值。
<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://tutorialspoint.tw/" >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() 方法獲取連結或錨標記的 target 屬性值。
語法
以下是獲取所有具有 target 屬性的錨標記的語法：
document.querySelectorAll('a[target]')
在上述語法中，document.querySelectorAll() 方法將“a[target]”作為引數。因此，它返回 NodeList 中的所有元素（包含 target 屬性的錨標記），並迴圈遍歷它，我們可以獲取所有 target 屬性值。
示例
在下面的示例中，我們使用了 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://tutorialspoint.tw/" >Link 1</a><br> <a target="_blank" href="https://www.tutorix.com/" >Link 2</a><br> <a href="https://tutorialspoint.tw/" >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>
7K+ 次瀏覽
