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> 
        How to change the href attribute 
        dynamically using JavaScript? 
    </title> 
</head> 
  
<body style="text-align:center;"> 
      
    <h1 style="color:green"> 
        GeeksforGeeks 
    </h1> 
      
    <h3> 
        Change the href attribute value<br> 
        dynamically using JavaScript 
    </h3> 
      
    <a href="https://www.google.com"> 
        Go to Google 
    </a> 
      
    <br><br> 
      
    <button onclick="myFunction()"> 
        Click Here! 
    </button> 
      
    <script type="text/javascript"> 
        function myFunction() { 
            var link = document.querySelector("a"); 
            link.getAttribute("href"); 
            link.setAttribute("href", 
                "https://www.geeksforgeeks.org"); 
            link.textContent = "Go to GeeksforGeeks"; 
        } 
    </script> 
</body> 
</html>

输出：

JavaScript 如何在点击按钮后更改标签的href值

<!DOCTYPE html> 
<html> 
<head> 
    <title> 
        How to change the href attribute 
        dynamically using JavaScript? 
    </title> 
</head> 
  
<body style="text-align:center;"> 
      
    <h1 style="color:green"> 
        GeeksforGeeks 
    </h1> 
      
    <h3> 
        Change the href attribute value<br> 
        dynamically using JavaScript 
    </h3> 
      
    <a href="https://www.google.com" id="myLink"> 
        Go to Google 
    </a> 
      
    <br><br> 
      
    <button onclick="myFunction()"> 
        Click Here! 
    </button> 
      
    <script type="text/javascript"> 
        function myFunction() { 
            document.getElementById('myLink').href 
                ="https://www.geeksforgeeks.org"; 
                  
            document.getElementById("myLink") 
                .textContent = "Go to GeeksforGeeks"; 
        } 
    </script> 
</body> 
</html>

输出：

JavaScript 如何在点击按钮后更改标签的href值