如何使用JavaScript在单击按钮后更改标签的href值

JavaScript是一种高级的、解释型的、动态类型的、客户端脚本语言。HTML用于创建静态网页。当与HTML和CSS一起使用时，JavaScript使得网页变得交互起来。文档对象操作(DOM)是用于HTML和XML文档的编程接口。DOM充当JavaScript和HTML与CSS结合的接口。DOM将文档表示为节点和对象，即浏览器将每个HTML标签转换为我们可以操作的JavaScript对象。DOM是对网页的面向对象表示，可以使用JavaScript等脚本语言进行修改。要操作文档内的对象，我们需要选择它们然后进行操作。选择元素有五种方式：

document.querySelector()方法： 返回与查询匹配的第一个元素。
document.querySelectorAll()方法： 返回与查询匹配的所有元素。
document.getElementById()方法： 返回与id匹配的一个元素。
document.getElementsByClassName()方法： 返回与类匹配的所有元素。
document.getElementsByTagName()方法： 返回与标签名匹配的元素列表。

DOM允许属性操作。属性控制HTML标签的行为或提供关于标签的其他信息。JavaScript提供了几种用于操作HTML元素属性的方法。以下方法被用于属性操作：

getAttribute()方法： 返回元素上指定属性的当前值，如果在元素上指定的属性不存在则返回null。
setAttribute()方法： 更新指定元素上已存在的属性的值，否则添加一个新的具有指定名称和值的属性。
removeAttribute()方法： 用于删除指定元素的属性。
示例1： 下面的代码演示了属性操作，其中<a>标签的href属性在按钮单击时发生变化。按钮单击时调用一个函数，该函数更新属性值。函数myFunction()是一个JavaScript函数，通过进行运行时修改使HTML代码更加交互。

<!DOCTYPE html>
<html>
<head>
    <title>如何使用JavaScript动态更改href属性？</title>
</head>

<body style="text-align:center;">

    <h1 style="color:green">GeeksforGeeks</h1>

    <h3>使用JavaScript动态更改href属性值<br><br>    
    </h3>

    <a href="https://www.google.com">前往Google</a>

    <br><br>

    <button onclick="myFunction()">点击这里！</button>

    <script type="text/javascript">
        function myFunction() {
            var link = document.querySelector("a");
            link.getAttribute("href");
            link.setAttribute("href",
                "https://www.geeksforgeeks.org");
            link.textContent = "前往GeeksforGeeks";
        }
    </script>
</body>
</html>

输出：

如何使用JavaScript在点击按钮后更改<a>标签的href属性值？

解释： 点击按钮之前，链接打开的是https://www.google.com。当点击按钮时，调用函数myFunction()，该函数选择<a>标签的href属性并将其值更新为https://www.geeksforgeeks.org。由于HTML文档中只有一个<a>标签，且我们的目标是更改其属性值，所以使用了querySelector()方法，并使用setAttribute()方法更新属性。

示例2： 点击按钮之前，链接打开的是https://www.google.com。当点击按钮时，调用函数myFunction()，该函数选择<a>标签的href属性并将其值更新为https://www.geeksforgeeks.org。在这种方法中，使用getElementById()方法来选择要更改目标URL的元素。

<!DOCTYPE html>
<html>
<head>
    <title>
        如何使用JavaScript动态更改href属性？
    </title>
</head>

<body style="text-align:center;">

    <h1 style="color:green">
        GeeksforGeeks
    </h1>

    <h3>
        动态使用JavaScript更改href属性值
    </h3>

    <a href="https://www.google.com" id="myLink">
        前往Google
    </a>

    <br><br>

    <button onclick="myFunction()">
        点击这里！
    </button>

    <script type="text/javascript">
        function myFunction() {
            document.getElementById('myLink').href
                ="https://www.geeksforgeeks.org";

            document.getElementById("myLink")
                .textContent = "前往GeeksforGeeks";
        }
    </script>
</body>
</html>

阅读更多：JavaScript 教程