如何在JavaScript中取得連結的目標屬性的值？
- 王林轉載
- 2023-09-03 09:33:02824瀏覽
在本教學中，我們將學習如何在 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中文網其他相關文章！