数据结构
网络
关系型数据库管理系统
操作系统
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]”作为参数。因此，它返回 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.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+ 次浏览
