如何在 JavaScript 中找到链接中的 href 和 target 属性?
首先，让我们了解 JavaScript 中的属性是如何工作的。任何元素的属性都可以用 JavaScript 更改。attributes 属性存储它们，调用它可以让您直接访问它们。如果我们用类定位一个元素，该类也会显示为属性，如果我们愿意，我们实际上可以利用这些属性方法来更改类。现在，请记住，虽然我们已经为类指定了属性和方法，但您也可以利用所有这些特性来操作任何元素中的类(如果需要)。
JavaScript 中的 href 属性
在锚标记的 href 属性中，HTML 允许放置链接。因此，在开发基于 JavaScript 的应用程序时，您必须动态构建链接并将它们分配给 HTML 锚元素的 href 属性，您必须以编程方式管理所有内容。
这是您需要 JavaScript 来构建链接的主要原因，这也是我们将在本文中讨论的内容。话虽如此，让我们仔细看看如何使用 JavaScript 快速构建链接。
创建 href 属性时要记住的要点
创建一个锚点元素 <a>。
创建一个包含一些将显示为链接的文本的文本节点。
应将文本节点添加到锚点 <a> 元素。
设置 <a> 元素的 title 和 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://www.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://www.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://www.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>
