您好,欢迎来到三六零分类信息网!老站,搜索引擎当天收录,欢迎发信息

如何在JavaScript中获取链接的目标属性的值?

2025/10/13 14:29:50发布15次查看
在本教程中,我们将学习如何在 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 tagslet links = document.getelementsbytagname('a')// looping through all the htmlcollection linksfor (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中获取链接的目标属性的值?的详细内容。
该用户其它信息

VIP推荐

免费发布信息,免费发布B2B信息网站平台 - 三六零分类信息网 沪ICP备09012988号-2
企业名录 Product