<a>使用 JavaScript 单击按钮后如何更改标签的 href 值？</a>

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

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

可以通过五种方式选择元素：

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

DOM 允许属性操作。属性控制 HTML 标记的行为或提供有关标记的附加信息。 JavaScript 提供了几种操作 HTML 元素属性的方法。

以下方法用于操作属性：

• getAttribute() 方法：它返回元素上某个属性的当前值，如果指定的属性在该元素上不存在，则返回 null。
• setAttribute() 方法：它更新指定元素上现有属性的值，否则添加具有指定名称和值的新属性。
• removeAttribute() 方法：用于删除指定元素的属性。

下面的代码演示了属性操作，其中 标记的 href 属性在按钮单击时发生变化。单击按钮时调用一个函数，该函数会更新属性值。 myFunction()函数是一个 JavaScript函数，它通过进行运行时修改使 HTML 代码更具交互性。

示例 1：

  

    
        How to change the href attribute
        dynamically using JavaScript?
    

  

      
    
        GeeksforGeeks
    
      
    
        Change the href attribute value
        dynamically using JavaScript
    
      
    
        Go to Google
    
      
    
      
    
        Click Here!
    
      
    
        function myFunction() { 
            var link = document.querySelector("a");
            link.getAttribute("href");
            link.setAttribute("href",
                "https://www.geeksforgeeks.org");
            link.textContent = "Go to GeeksforGeeks";
        }
    

  

输出：

说明：该链接在单击按钮之前打开 https://www.google.com。单击按钮时，会调用函数myFunction()，该函数选择 标签的 href 属性并将其值更新为 https://www.geeksforgeeks.org，因为 HTML 中只有一个 标签文档，我们旨在更改其属性值，我们使用 querySelector() 并使用 setAttribute() 方法更新属性。

示例 2：

  

    
        How to change the href attribute
        dynamically using JavaScript?
    

  

      
    
        GeeksforGeeks
    
      
    
        Change the href attribute value
        dynamically using JavaScript
    
      
    
        Go to Google
    
      
    
      
    
        Click Here!
    
      
    
        function myFunction() { 
            document.getElementById('myLink').href
                ="https://www.geeksforgeeks.org";
                  
            document.getElementById("myLink")
                .textContent = "Go to GeeksforGeeks";
        }
    

  

输出：

说明：该链接在单击按钮之前打开 https://www.google.com。单击按钮时，会调用函数myFunction()，该函数选择 标记的 href 属性并将其值更新为 https://www.geeksforgeeks.org。在这种方法中，getElementById() 方法用于选择要更改其目标 URL 的元素。