JS DOM操作案例

显示隐藏表单文本内容
<input type="text" value="手机">

         var text = document.querySelector("input")
         // 获取焦点
         text.onfocus = function () {
             if (this.value === '手机') {
                 this.value = ''
             }
         }
         // 失去焦点
         text.onblur = function () {
             if (this.value === '') {
                 this.value = '手机'
             }
         }

通过element.className获取修改元素样式

 <div class="first" id="conter">文本</div>

var conter = document.getElementById("conter")
        conter.onclick = function () {
            // 通过修改元素的ClassName更改元素的样式适用于样式多或者繁杂的情况下
            this.className = 'change'
            // 如果想要保留之前的class
            this.className = 'first change'
        }

效果图

密码框错误提示

<div class="register">
        <input type="password" id="ipt">
        <p class="message" id="message">请输入6-12位密码</p>
    </div>

   var ipt = document.getElementById("ipt")
         var message = document.getElementById("message")
         ipt.onblur = function () {
             // 根据ipt.value长度判断
             if (this.value.length < 6 || this.value.length > 12) {
                 message.className = 'message wrong'
                 message.innerHTML = '您输入的位数不对要求6~12位'
             } else {
                 message.className = 'message right'
                 message.innerHTML = '您输入的正确'
             }
         }

效果图

css代码:

 <style>
         .box {
             background-image: url(../imges/TB1eiXTXlTH8KJjy0FiXXcRsXXa-24-595.png);
             background-repeat: no-repeat;
         }

         .change {
             font-size: 203px;
         }

         .register {
             width: 600px;
             margin: 100px auto;
         }

         .message {
             display: inline-block;
             font-size: 12px;
             color: #999;
             padding-left: 20px;
         }

         .wrong {
             color: red;
         }

         .right {
             color: green;

         }
     </style>

百度换肤效果

       <ul class="baidu">
           <li><img src="../imges/business-pic3.jpg" alt=""></li>
           <li><img src="../imges/business-pic4.jpg" alt=""></li>
       </ul>

           var imgs = document.querySelector(".baidu").querySelectorAll("img")
           // 给每个可以换肤的图片循环注册点击事件
           for (var i = 0; i < imgs.length; i++) {
              imgs[i].onclick = function () {
                  // 点击图片的路径
                  // 把这个路径给body就可以了
                  document.body.style.backgroundImage = 'url(' + this.src + ')'
              }
          }

效果图

表格

 <table>
         <thead>
             <tr>
                 <th><input type="checkbox" id="j_cbAll"></th>
                 <th>2</th>
                 <th>1</th>
                 <th>2</th>
                 <th>1</th>
                 <th>2</th>
             </tr>
         </thead>
         <tbody id="j_tb">
             <tr>
                 <td><input type="checkbox"></td>
                 <td>c</td>
                 <td>c</td>
                 <td>c</td>
                 <td>c</td>
                 <td>c</td>
             </tr>
             <tr>
                 <td><input type="checkbox"></td>
                 <td>c</td>
                 <td>c</td>
                 <td>c</td>
                 <td>c</td>
                 <td>c</td>
             </tr>
         </tbody>
     </table>

表格隔行变色

   // 获取的是tbody中的行
         var trs = document.querySelector("tbody").querySelectorAll("tr")
         for (var i = 0; i < trs.length; i++) {
             // 鼠标经过
             trs[i].onmousemove = function () {
                 this.className = 'bg'
             }
             // 鼠标离开
             trs[i].onmouseout = function () {
                 this.className = ''
             }
         }

表格全选

 var j_cbAll = document.getElementById("j_cbAll")
         var ipt = document.getElementById("j_tb").getElementsByTagName("input")
         j_cbAll.onclick = function () {
             // 得到当前复选框的状态
             console.log(this.checked);
             for (var i = 0; i < ipt.length; i++) {
                 ipt[i].checked = this.checked
             }
         }
         // 下面按钮影响上面按钮
         for (var j = 0; j < ipt.length; j++) {
             ipt[j].onclick = function () {
                 // flag控制全选按钮是否选中
                 var flag = true;
                 // 每次发生点击都要检查是否全选中
                 for (var a = 0; a < ipt.length; a++) {
                     if (!ipt[a].checked) {
                         flag = false;
                         break; //退出for循环 可以提高效率 只要有一个没有选中剩下的就不需要循环判断了
                     }
                 }
                 j_cbAll.checked = flag
             }
         }

效果图

css代码:

         body {
             background-image: url(../imges/erwm.jfif);
             background-repeat: no-repeat;
         }

         .baidu {
             width: 200px;
             height: 100px;
             margin: 0 auto;
             list-style: none;

         }

         .baidu img {
             width: 100px;
             height: 100px;
             float: left;
         }

         .bg {
             background-color: pink;
         }