☞案例示例

操作元素-案例

---

---

前言

通过前面学习的DOM知识，做几个案例

一、修改表单元素内容

CSS设置

<style>
        input {
            color:#999;  /*修改表单输入内容的颜色---#999灰色*/
        }
    </style>

HTML和JS设置

<input type="text" value="夕颜">
    <script>

        //案例-当鼠标点击文本框时，里面默认的文字隐藏，当鼠标离开文本框时，里面的文字显示。
        //新的表单事件   ，获取焦点onfocus   失去焦点onblur

        //一获得元素
        var ipt = document.querySelector('input');
        //注册事件
        ipt.onfocus = function() {
            //console.log('我被关注了');  //获得焦点 onfocus
            if (this.value === '夕颜') {
                this.value = '';    //如果input输入框里面默认的文字就是夕颜，点击文本框，value值变为空字符。
            }
            //获得焦点需要把文本框里面的颜色变黑
            this.style.color = '#333'; //文本框输入字体颜色为黑色#333
        }
        ipt.onblur = function() {
        //  console.log('取消关注');
        if (this.value === '') {
            this.value = '夕颜';
            
          }
          this.style.color = '#999'
        }
    </script>

二、通过className修改元素属性

CSS

<style>
        div {
            width: 160px;
            height: 160px;
            background-color: #999;
        }
            .change {
                background-color:pink;
                color:#fff;
                font-size:25px;
                margin-top: 100px;
            }
    </style>

HTML和JS

<div>123</div>
    <script>
         var test = document.querySelector('div');
         test.onclick = function() {
            this.className = 'change';
         }
    </script>

三、密码格式框提示错误信息

• 如果用户离开密码框，里面的个数输入不是6-16，则提示错误信息，否则提示输入正确
  一、首先判断的事件是是否离开密码框，表单失去焦点onblur
  二、如果输入正确则提示正确的信息
  三、如果输入不是6-16位，则提示错误信息
  里面的样式变化较多，我们采取className修改样式

CSS

<style>
        .register {
            
            /* 自绝父相 */
            position: relative;
           
           
            margin: 80px auto;
        }
       .register input {
           display:inline-block;
            width: 370px;
            height: 30px;
            border: 2px solid pink;
            outline: none;
       }
       .register img {
            position: absolute;
            top: 8px;
            right: 30px;
            width: 20px;
        }
        .message {
                display: inline-block;  /*转换为行内块元素 */
               font-size: 12px;  /*字体大小*/
               color:#999;  /*字体颜色*/
               padding-left:20px;
        }
    </style>

HTML和JS

<div class="register">
        <label for="">
            <img src="images/open.png" alt="">
        </label>
       
        <input type="password" class="ipt">
        <p class="message">请输入6-16位密码</p>
    </div>
    <script>
     //如果用户离开密码框，里面的个数输入不是6-16，则提示错误信息，否则提示输入正确
      //一。首先判断的事件是是否离开密码框，表单失去焦点onblur
      //二、如果输入正确则提示正确的信息颜色为绿色小图标变化
      //三、如果输入不是6-16位，则提示错误信息颜色为红色，小图标发生变化
      //里面的样式变化较多，我们采取className修改样式
      var eye = document.querySelector('img');
      var pwd = document.querySelector('.ipt');
        //注册事件
        var flag=0;
        eye.onclick = function() {
            if (flag == 0) {
                pwd.type = 'text';
                flag=1; 
            } else {
                pwd.type='password';
                flag = 0;
            }
           
        }
        pwd.onblur = function() {
            if (this.value.length <6 || this.value.length >16) {
                console.log('错误');
            }
            else {
                console.log('输入正确');
            }
        }
        
        
    </script>

代码如下（示例）：

import numpy as np
import pandas as pd
import matplotlib.pyplot as plt
import seaborn as sns
import warnings
warnings.filterwarnings('ignore')
import  ssl
ssl._create_default_https_context = ssl._create_unverified_context

四、开关灯

点击按钮，能切换背景颜色，从白色到黑色

<button>开关灯</button>
    <script>
        //获取元素
        var btn = document.querySelector('button');
        var bodyEle = document.body;
        var flag = 0;
        //注册事件
        btn.onclick = function() {
            if (flag == 0 ) {
                bodyEle.style.backgroundColor = 'black';
                flag = 1
            }  else {
                bodyEle.style.backgroundColor = 'white';
                flag = 0;
            }
        }
    </script>

五、❤排他思想

排他思想 :如果有同一组元素，我们想要某一个元素实现某种样式，需要用到循环算法的排他思想算法

<script>
 // 1.所有元素全部清除样式（干掉其他人）2.给当前元素设置样式（留下我自己）3.顺序不能颠倒。
         //获取所有按钮
         var btns = document.querySelectorAll('button');
         for (var i=0; i<btns.length; i++) {
            btns[i].onclick = function() {
                // (1) 我们先把所有的按钮背景颜色去掉
                // (2) 然后才让当前的元素背景颜色为pink
                for (var i=0; i<btns.length; i++) {
                    btns[i].style.backgroundColor = '';
                }
                this.style.backgroundColor = 'pink';
            }
         }
    </script>

六、全选按钮

CSS设置

<style>
        table {
            border :1px solid #333;
        }
        th {
            border :1px solid pink;
        }
    </style>

HTML

<!-- 让下面所有复选框的checked属性（选中状态）跟随全选按钮即可 -->
    <table>
        <thead>
            <tr>
                <th><input type="checkbox" id="j_cbAll">
                </th>
                <th>商品</th>
                <th>价钱</th>
            </tr>
        </thead>
        <tbody id="j_tb">
            <tr>
                 <td>
                    <input type="checkbox">
                 </td>
                    <td>iphone8</td>
                    <td>8000</td>
                
            </tr>
            <tr>
                  <td>
                    <input type="checkbox">
                  </td>
                    <td>iphone7</td>
                    <td>6000</td>
               
            </tr>
            <tr>
                    <td>
                       <input type="checkbox">
                    </td>
                       <td>iphone4</td>
                       <td>3000</td>
               
            </tr>
        </tbody>
    </table>

JS

<script>
        // 获取元素
        var j_cbAll = document.getElementById('j_cbAll'); //获取全选按钮
        var j_tbs = document.getElementById('j_tb').getElementsByTagName('input'); //获取下面的复选框
        // 注册事件
        j_cbAll.onclick = function() {
            // this.checked可以达到当前的复选框的选中状态,如果是true表示选中,如果是false表示没选中;
            console.log(this.checked);
            for (var i =0; i < j_tbs.length; i++) {
                j_tbs[i].checked = this.checked;  //这里this.checked不用加引号，因为this是一个关键字，使得this.checked不被识别为字符。
            }
        }
    //    下面所有复选框需要全部选中, 上面全选按钮才能选中做法;给下面的复选框绑定事件，每次点击，都要循环检查3个小按钮是都全都被选中
    for (var i=0; i<j_tbs.length; i++) {
        j_tbs[i].onclick = function() {
            // flag控制全选按钮是否选中
            var flag = true;
            // 每次点击下面下面的复选框都要检查三个按钮是否全部被选中
            for (var i=0 ; i<j_tbs.length; i++) {
                if (!j_tbs[i].checked ) {
                    flag = false; //核心算法：只要在循环中发现有一个复选框没有被选中，就把flag赋值 false  ，结束循环后全选按钮=false
                    break; //只要有一个没有被选中，剩下的就不需要循环了，提高我们的工作效率
                }
            }
          j_cbAll.checked = flag;
        }
    }
    </script>

---

总结

通过这个案例能快速掌握DOM