数据结构
网络
关系数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何在 JavaScript 中查找链接的 href 和 target 属性？
首先，让我们了解一下属性在 JavaScript 中是如何工作的。任何元素的属性都可以用 JavaScript 更改。attributes 属性存储它们，调用它可以让你直接访问它们。如果我们用一个类来定位一个元素，这个类也会显示为一个属性，我们实际上可以使用这些属性方法来更改类，如果我们这样选择的话。现在，请记住，虽然我们已经为类指定了属性和方法，但如果需要，你也可以使用所有这些特性来操作任何元素中的类。
JavaScript 中的 href 属性
在锚标记的 href 属性中，HTML 允许放置链接。因此，在开发基于 JavaScript 的应用程序时，必须动态构建链接并将它们分配给 HTML 锚元素的 href 属性，在这些应用程序中，必须以编程方式管理所有内容。
这是你需要 JavaScript 来构建链接的主要原因，这也是我们将在本文中讨论的内容。话虽如此，让我们更仔细地看看如何使用 JavaScript 快速构建链接。
创建 href 属性需要记住的重要事项
创建一个锚元素 <a>。
创建一个文本节点，其中包含一些将显示为链接的文本。
文本节点应添加到锚 <a>元素中。
设置 <a> 元素的标题和 href 属性。
在主体中添加 <a> 元素。
示例 1
在这个例子中，让我们了解如何使用 javaScript 创建链接。我们必须首先使用 javaScript 构建一个锚标记。我们可以使用下面给出的代码来创建锚点。我们稍后会需要它，所以创建一个元素（使用 < a> 标记）并将其分配给变量“myAnchor” - 下面提供的代码可用于创建锚点。创建一个元素（使用 < a> 标记）并将其分配给“anchor”变量。下一行的 javaScript 代码将用于将链接放置在 < a> 标记的 href 属性中。
<!DOCTYPE html> <html> <title>How to find the href and target attributes in a link in JavaScript - TutorialsPoint</title> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <p>Click to view my website</p> <script> let myAnchor = document.createElement('a'); let textToLink = document.createTextNode("Tutorialspoint Website"); myAnchor.appendChild(textToLink); myAnchor.href = "https://tutorialspoint.com/"; document.body.appendChild(myAnchor); </script> </body> </html>
示例 2
在这个例子中，让我们了解节点是如何创建的，以及属性是如何由 JavaScript 方法设置的。
<!DOCTYPE html> <html> <title>How to find the href and target attributes in a link in JavaScript - TutorialsPoint</title> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <p>To generate a link using JavaScript, press the button.</p> <button onclick = "myFun()"> Click Me </button> <script> function myFun() { let x = document.createElement('a'); let textTolink = document.createTextNode("This is link"); x.appendChild(textTolink); x.title = "This is Link"; x.href = "https://tutorialspoint.com/"; document.body.appendChild(x); } </script> </body> </html>
JavaScript 中的 target 属性
这里让我们了解一下 JavaScript 中的 target 属性。当用户点击链接时，HTML target 属性指定链接的文档将在其中打开。如果使用锚元素指定了 target="blank"，则链接的文档将在新标签页中打开；否则，它将在现有标签页中打开。
有两种方法可以执行此任务。一种是传统且冗长的方式，它涉及在 HTML 标记内编写 target="blank" 属性。Javascript 代码执行是另一种更实用的方法。
我们首先将开发一个事件函数，该函数在每次点击后调用，如果存在锚标记但未给出 target 属性，则将 target 属性设置为“_blank”。
示例 3
以下 JavaScript 示例演示了如何使用 target="blank" -
<!DOCTYPE html> <html> <title>How to find the href and target attributes in a link in JavaScript - TutorialsPoint</title> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body style="text-align:center"> <a href="https://tutorialspoint.com/"> Tutorialspoint<br> Online tutorials library offering and easy learning on IT & software topic </a> <script> document.addEventListener("click", function(t) { if (t.target.tagName == "B" && !t.target.hasAttribute("target")) { t.target.setAttribute("target", "_blank"); } }); </script> </body> </html>
6K+ 次查看
