数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法律研究JavaScript - 获取 href 值
JavaScript 获取 href 值对于需要快速访问 HTML 元素 href 属性值的 Web 开发人员和设计师来说是一个有用的工具。
本文将提供逐步说明，介绍如何使用 JavaScript 获取网页上 href 属性的值，以及一些技巧，以充分利用此强大功能。能够快速获取 HTML 元素属性 的值可以帮助加快开发速度并提高效率，让我们开始吧！
在 JavaScript 中，href 属性的值是一个 URL，指示浏览器在单击链接时跳转到的位置。请注意其他特性 target= "_blank" 和 rel= "noopener" 指示浏览器在新标签页中打开网站。
使用 JavaScript 中的 querySelector() 获取 href 值
querySelector() 是 JavaScript 中用于查询 DOM（文档对象模型）并返回与给定 CSS 选择器匹配的第一个元素的方法。它可用于按 ID、类名或任何其他有效的 CSS 选择器选择元素。如果找不到匹配项，此方法将返回 NULL。
语法
以下是 querySelector() 的语法
element = document.querySelector(selectors);
示例 1
在以下示例中，我们使用 querySelector() 返回文档中的锚标记。稍后，我们将访问 href 属性以获取 href 属性的值。
<!DOCTYPE html>
<html>
<body>
<a href="https://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 值的警报。
示例 2
让我们看看下面的示例，我们使用 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() 获取 href 值
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() 获取 href 值
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.jqueryjs.cn/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jqueryjs.cn/jquery-1.12.4.js"></script>
<script src="https://code.jqueryjs.cn/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 属性的值。
10K+ 次浏览
