JavaScript - 获取 href 值
JavaScript 获取 href 值对于需要快速访问 HTML 元素 href 属性值的 Web 开发人员和设计人员来说是一个有用的工具。
本文将逐步说明如何使用 JavaScript 获取网页上 href 属性的值，以及充分利用此强大功能的一些技巧和窍门。快速获取 HTML 元素属性值的能力可以帮助加快开发速度并提高效率，让我们开始吧!
JavaScript 中 href 属性 的值是一个 URL，它指示浏览器单击链接时转到何处。附加特性 target= "_blank" 和 rel= "noopener" 指示浏览器在新选项卡中打开网站，因此请注意它们。
在 JavaScript 中使用 querySelector()
querySelector() 是 JavaScript 中的一种方法，用于查询 DOM(文档对象模型)并返回与给定 CSS 选择器匹配的第一个元素。它可用于通过其 ID、类名或任何其他有效的 CSS 选择器选择元素。如果没有匹配项，此方法将返回 NULL。
语法
以下是 querySelector()
的语法element = document.querySelector(selectors);
示例
在下面的示例中，我们使用 querySelector()，它返回文档中的锚标记。稍后，我们将访问 href 属性 以获取 href 属性 的值。
<!DOCTYPE html>
<html>
<body>
<a href="https://www.tutorialspoint.com/index.htm">Direct To Open</a>
<br><br>
<button id="submit">Click</button>
<script>
document.getElementById('submit').onclick = function() {
var href = document.querySelector('a').href;
alert(href);
}
</script>
</body>
</html>
脚本执行时，将生成一个输出，其中包含带有文本"直接打开"的 href 链接以及网页上的点击按钮。当用户点击按钮时，将触发事件并在网页上显示 href 值的警报。
示例
让我们看看下面的示例，其中我们使用 querySelector() 来获取 href 属性的值。
<!DOCTYPE html>
<html>
<body>
<a href="https://www.google.com/">Open</a>
<br><br>
<button id="submit">Click</button>
<p id="tutorial"></p>
<script>
document.getElementById('submit').onclick = function() {
var anchor = document.querySelector("a")
document.getElementById("tutorial").innerHTML=(anchor.getAttribute('href'));
}
</script>
</body>
</html>
脚本运行时，它将生成一个输出，其中包含一个链接和一个点击按钮。如果用户点击按钮，则会触发事件并在 Web 浏览器上显示 href 属性的值。
在 JavaScript 中使用 getAttribute()
Element 接口的 getAttribute() 方法返回元素上提供的属性的值。如果请求的属性不存在，则将传递 null 或 ""(空字符串)。
语法
以下是 getAttribute() 的语法
getAttribute(attributeName)
示例
考虑以下示例，我们使用 getAttribute() 获取指定锚标记上的 href 属性的值。
<!DOCTYPE html>
<html>
<body>
<a href="https://www.youtube.com/">Direct To Open</a>
<br><br>
<button id="submit">Click</button>
<script>
document.getElementById('submit').onclick = function() {
var href = document.querySelector('a').getAttribute('href');
document.write(href);
}
</script>
</body>
</html>
运行上述脚本后，Web 浏览器会在网页上显示 href 链接 以及文本和点击按钮。如果用户点击该按钮，则会触发事件，并在 Web 浏览器上显示 href 值。
使用 attr()
attr() 方法用于设置或返回所选元素的属性及其值。如果用于返回 属性值，则返回第一个匹配的元素。
语法
以下是 attr() 的语法
$(selector).attr(attribute)
示例
执行以下程序，其中我们正在运行脚本以获取 href 属性 的值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<ul class="getURLDemo">
<li>
<a class="demo" title="get the url" href="./mainPage.jsp/1245">Open</a>
</li>
</ul>
<script>
var hrefValue = $('ul.getURLDemo li a.demo').attr('href');
document.write(hrefValue);
</script>
</body>
</html>
当脚本执行时，事件被触发并显示链接以及 href 属性 值。
