JavaScript DOM操作案例点击按钮a标签的链接跟热点文字-优快云博客

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title></title>
 6 </head>
 7 <body>
 8 <input type="button" value="修改链接跟文字" id="bt"/>
 9 <a href="www.taobao.com" id="a1">我是一个链接</a>
10 <script>
11     //根据id获取按钮元素,注册点击事件,添加事件处理函数
12     document.getElementById("bt").onclick = function () {
13         //根据id获取a元素
14         document.getElementById("a1").innerText = "这是一个a";
15         document.getElementById("a1").href = "www.baidu.com";
16     };
17 </script>
18 </body>
19 </html>

优化后的代码:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title></title>
 6 </head>
 7 <body>
 8 <input type="button" value="修改链接跟文字" id="bt"/>
 9 <a href="http://www.taobao.com" id="a1">淘宝</a>
10 <script>
11     //根据id获取按钮元素,注册点击事件,添加事件处理函数
12     //    document.getElementById("bt").onclick = function () {
13     //        //根据id获取a元素
14     //        document.getElementById("a1").innerText = "百度";
15     //        document.getElementById("a1").href = "http://www.baidu.com";
16     //    };
17     document.getElementById("bt").onclick = function () {
18         var aObj = document.getElementById("a1");
19         aObj.innerText = "百度";
20         aObj.href = "http://www.baidu.com";
21     };
22 </script>
23 </body>
24 </html>