📅 最后修改于: 2023-12-03 15:31:12.767000 🧑 作者: Mango
HTML中的链接通过 href 属性指定需要跳转的目标URL。我们可以通过DOM来操控 href 属性，以便在JavaScript中动态地修改链接。
我们可以使用 getAttribute() 方法来获取一个元素的 href 属性值。例如，我们可以获取以下 <a> 元素的 href 属性值：
var link = document.getElementById("myLink");
var href = link.getAttribute("href");
在这个示例中，我们首先使用 document.getElementById() 方法获取 ID 为 "myLink" 的元素。然后，我们调用 getAttribute() 方法并传递 "href" 参数以获取该元素的 href 属性值。
我们可以使用 setAttribute() 方法来设置一个元素的 href 属性值。例如，我们可以将以下 <a> 元素的 href 属性设置为新URL：
var link = document.getElementById("myLink");
link.setAttribute("href", "http://www.example.com");
在这个示例中，我们首先使用 document.getElementById() 方法获取 ID 为 "myLink" 的元素。然后，我们调用 setAttribute() 方法并传递 "href" 参数以设置该元素的 href 属性值为 "http://www.example.com"。
以下示例演示如何使用 JavaScript 动态地修改链接的 href 属性：
<!DOCTYPE html>
<html>
<body>
<a id="myLink" href="http://www.example.com">Click me</a>
<script>
// 获取 href 属性值
var link = document.getElementById("myLink");
var href = link.getAttribute("href");
console.log(href);
// 设置 href 属性值
link.setAttribute("href", "http://www.google.com");
</script>
</body>
</html>
在这个示例中，我们首先定义了一个带有 ID 为 "myLink" 的链接。当用户点击该链接时，它将跳转到 "http://www.example.com" 页面。
然后，我们使用 JavaScript 获取该元素的 href 属性值，并将其记录在控制台中。
最后，我们使用 JavaScript 将链接的 href 属性值更改为 "http://www.google.com"。现在，当用户点击该链接时，它将跳转到 "http://www.google.com" 页面。
以上就是有关 HTML | DOM 位置 href 属性的介绍。