在本教程中，我们将学习如何在 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中获取链接的目标属性的值？的详细内容，更多请关注双恒网络其它相关文章！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！
7. 如遇到加密压缩包，请使用WINRAR解压,如遇到无法解压的请联系管理员！
8. 精力有限，不少源码未能详细测试（解密），不能分辨部分源码是病毒还是误报，所以没有进行任何修改，大家使用前请进行甄别
9.本站默认解压密码为:www.sudo1.com
本站提供的一切软件、教程和内容信息仅限用于学习和研究目的。
不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。
本站信息来自网络收集整理，版权争议与本站无关。您必须在下载后的24个小时之内，从您的电脑或手机中彻底删除上述内容。
如果您喜欢该程序和内容，请支持正版，购买注册，得到更好的正版服务。
我们非常重视版权问题，如有侵权请邮件与我们联系处理。敬请谅解！
云资源网 » 如何在JavaScript中获取链接的目标属性的值？
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用？
- 本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了？
- 你们有qq群吗怎么加入？
