数据结构
网络
关系数据库管理系统 (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.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://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()方法可用于获取链接或锚标签的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.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()方法可用于获取链接或锚标签的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.com/" >Link 1</a><br> <a target="_blank" href="https://www.tutorix.com/" >Link 2</a><br> <a href="https://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>
7K+ 浏览量
