zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    CSS 常见的8种选择器 和 文本溢出问题
    CSS 的三种样式 内联 内部 外部
    小记
    冠词的用法
    Levenberg–Marquardt algorithm
    classical 和 classic 的区别
    论文时态
    简明 Python 教程
    pytorch中的动态学习率规划器
    如何计算数据集均值和方差
  • 原文地址:https://www.cnblogs.com/cuilichao/p/9338251.html
Copyright © 2011-2022 走看看