JavaScript DOM操作案例点击按钮修改所有p标签的内容 

 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"/><br/>
 9 <input type="text" value="德玛西亚"/><br/>
10 <input type="text" value="德玛西亚"/><br/>
11 <input type="text" value="德玛西亚"/><br/>
12 <input type="text" value="德玛西亚"/><br/>
13 <input type="text" value="德玛西亚"/><br/>
14 <input type="text" value="德玛西亚"/><br/>
15 <input type="text" value="德玛西亚"/><br/>
16 <input type="text" value="德玛西亚"/><br/>
17 <script>
18     //通过id获取按钮,注册点击事件,添加事件处理函数
19     document.getElementById("bt").onclick = function () {
20         //获取所有的input标签
21         var texObjs = document.getElementsByTagName("input");
22         //遍历获取到的input标签
23         for (var i = 0; i < texObjs.length; i++) {
24             //找出type属性值为text的元素(button不修改)
25             if(texObjs[i].type == "text") {
26                 //修改内容
27                 texObjs[i].value = "库你急哇";
28             }
29         }
30     };
31 </script>
32 </body>
33 </html>

 

posted @ 2018-07-19 20:40  {颜逸}  阅读(1210)  评论(0)    收藏  举报