如何在JavaScript中获取链接的目标属性的值？-html教程-PHP中文网

首页

web前端

html教程

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

王林

Sep 03, 2023 am 09:33 AM

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

在本教程中，我们将学习如何在 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中文网其他相关文章！

声明

本文转载于：tutorialspoint。如有侵权，请联系admin@php.cn删除

从文本到网站：HTML的力量Apr 13, 2025 am 12:07 AM

HTML是一种用于构建网页的语言，通过标签和属性定义网页结构和内容。1）HTML通过标签组织文档结构，如、。2）浏览器解析HTML构建DOM并渲染网页。3）HTML5的新特性如、、增强了多媒体功能。4）常见错误包括标签未闭合和属性值未加引号。5）优化建议包括使用语义化标签和减少文件大小。

了解HTML，CSS和JavaScript：初学者指南Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。

HTML的角色：构建Web内容Apr 11, 2025 am 12:12 AM

HTML的作用是通过标签和属性定义网页的结构和内容。1.HTML通过到、等标签组织内容，使其易于阅读和理解。2.使用语义化标签如、等增强可访问性和SEO。3.优化HTML代码可以提高网页加载速度和用户体验。

HTML和代码：仔细观察术语Apr 10, 2025 am 09:28 AM

htmlisaspecifictypefodyfocusedonstructuringwebcontent，而“代码” badlyLyCludEslanguagesLikeLikejavascriptandPytyPythonForFunctionality.1）htmldefineswebpagertuctureduseTags.2）“代码”代码“ code” code code code codeSpassSesseseseseseseseAwiderRangeLangeLangeforLageforLogageforLogicIctInterract

HTML，CSS和JavaScript：Web开发人员的基本工具Apr 09, 2025 am 12:12 AM

HTML、CSS和JavaScript是Web开发的三大支柱。1.HTML定义网页结构，使用标签如、等。2.CSS控制网页样式，使用选择器和属性如color、font-size等。3.JavaScript实现动态效果和交互，通过事件监听和DOM操作。

HTML，CSS和JavaScript的角色：核心职责Apr 08, 2025 pm 07:05 PM

HTML定义网页结构，CSS负责样式和布局，JavaScript赋予动态交互。三者在网页开发中各司其职，共同构建丰富多彩的网站。

HTML容易为初学者学习吗？Apr 07, 2025 am 12:11 AM

HTML适合初学者学习，因为它简单易学且能快速看到成果。1)HTML的学习曲线平缓，易于上手。2)只需掌握基本标签即可开始创建网页。3)灵活性高，可与CSS和JavaScript结合使用。4)丰富的学习资源和现代工具支持学习过程。

HTML中起始标签的示例是什么？Apr 06, 2025 am 12:04 AM

AnexampleOfAstartingTaginHtmlis，beginSaparagraph.startingTagSareEssentialInhtmlastheyInitiateEllements，defiteTheeTheErtypes，andarecrucialforsstructuringwebpages wepages webpages andConstructingthedom。

See all articles