資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
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]”作為引數。因此，它返回所有包含target屬性的錨標籤元素，這些元素位於NodeList中，透過迴圈遍歷它們，我們可以獲取所有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+ 瀏覽量
