DOM基础（基础操作元素修改内容和样式）

一、内容修改

1. 改变元素内容：inner.HTML

1. 可以不用事件直接修改内容

         // 元素可以不用添加事件:刷新就会改变页面内容
         var p = document.querySelector("p");
         //   可以直接使用innerHTML
         p.innerHTML = getDate();

2. 根据事件操作顺序：首先获取元素+再进行设置内容修改

      var btn = document.querySelector("button");
      var div = document.querySelector("div");
      //   2.注册事件+执行函数
      btn.onclick = function () {
        // 直接调用函数
        div.innerHTML = getDate();
      };
      // 封装函数
      function getDate() {
        var date = new Date();
        var year = date.getFullYear();
        var month = date.getMonth() + 1; //因为以下标形式存在  所以比平时少一个
        var dates = date.getDate(); //日
        var day = date.getDay(); //周
        var arr = [
          "星期日",
          "星期一",
          "星期二",
          "星期三",
          "星期四",
          "星期五",
          "星期六",
        ];
        return "今天是" + year + "年" + month + "月" + dates + "日" + arr[day];
      }

 2. inner.Text和inner.HTML的对比

• inner.Text：

  • 不识别html标签：会把内容全部打印出来

  • 非标准（ie发起）  老版本火狐不可用

  • 去除空格和换行直接显示内容

• inner.HTML

  • 识别html标签：会把内容配合标签打印出来

  • w3c标准推荐

  • 保留标签内的换行以及空格等等

3.改变元素路径 ：img.src = ” 

• 图片路径修改：   此处获取元素之后添加事件或者不添加事件直接修改路径

        //在获取元素前提下进行修改路径
        zxy.onclick = function () {
          img.src = "../images/zxy.jpg";
          img.title = "谁是谁的谁";
        };

 4.案例：分时间段显示图片+修改内容

• 此处使用了当前时间获取的内置对象
• inner.HTML修改内容
• inner.Text修改元素路径

     <img src="../images/s.gif" alt="" /&gt;
      <div&gt;上午好</div&gt;
      <script&gt;
        // 根据不同时间：时间内置对象
        // 利用分支语句
        // 图片路径操作
        // div内容修改;
  
        //   1.获取元素（标签获取）
        var img = document.querySelector("img");
        var div = document.querySelector("div");
        //   2.Date内置对象获取当前小时数
        var date = new Date();
        var h = date.getHours();
        //   3.判断当前时间点：修改标签内容+图片路径
        if (h < 12) {
          img.src = "../images/z.gif";
          div.innerHTML = "上午好！吃早饭了？";
        } else if (h < 20) {
          img.src = "../images/x.gif";
          div.innerHTML = "下午好！工作了？";
        } else {
          img.src = "../images/w.gif";
          div.innerHTML = "晚上好！该睡了！";
        }
      </script>

二、表单内容修改

1. 修改表单内容和按钮点击效果

1. 表单属性：input（name）.type 
2. 表单内容：input（name）.value 
3. 按钮点击：input（name）.disabled
   1. disabled：返回的是布尔值
   2. true：禁止点击
   3. false：可以点击

             //   1. 获取元素
            var btn = document.querySelector("button");
            var input = document.querySelector("input");
            //   2.注册时间：处理程序
            btn.onclick = function () {
              // 无效：以为innerHTML是普通盒子才会有的
              // input.innerHTML = "点击";
              // 表单里面的文字内容是通过value进行修改
              input.value = "被点击了";
              //想要某个表单被禁用不能再被点击：使用disabled
              // btn禁用
              // btn.disabled = true;
              this.disabled = true;
            };

2. 案例：输入框的显示与消失

•  首先获取到元素
• 设置flag：初始变量是0
• 设置点击事件：此时因为有两种可能性进行判断（flag）
  • 判断当前数值;
    • 0：则修改当前的input.type属性（text）+修改小眼睛图片路径+当前的判断值（修改为1）
    • 1：则修改当前的input.type属性（passward）+修改小眼睛图片路径+当前的判断值（修改为0）

      //设置当前判断值的初始变量
      var flag = 0;
      eye.onclick = function () {
        // -------------------------------------------
        // 分支语句据进行判断执行
        // 如果是0执行密码可看见并对flag赋值
        if (flag == 0) {
          pwd.type = "text";
          this.src = "../images/open.png";
          //   点击一次之后进行一次变化
          flag = 1;
        } else {
          // 否则执行密码看不见并对flag执行赋值
          pwd.type = "password";
          this.src = "../images/close.png";
          flag = 0;
        }
      };

 三、修改样式

1. 简单样式修改

• 获取到当前元素
• 直接修改样式（注意多名拼接的样式名字使用驼峰命名）

          this.style.width = "250px";
          this.style.color = "#fff";
          this.style.fontSize = "25px";
          this.style.marginTop = "100px";

2. 复杂样式修改：className

• 获取当前元素
• 提前设置一个类名并设置好属性
• 直接调用 className属性进行修改当前类名
  • 注意：当前类名直接调用会被覆盖
  • 如果只是在不修改原来的基础上添加属性：就要采用多类名操作 

 this.className = "one change";

3.案例：条状精灵图遍历

• 获取所有li
• 遍历对象
• 设置变量运算（配合遍历初始值） 
• 在遍历过程中修改样式（驼峰命名法）

     <script>
        // 竖着排列的精灵图
        //1. 获取元素
        var lis = document.querySelectorAll("li");
        //   2.遍历
        for (var i = 0; i < lis.length; i++) {
          // 让索引号乘以44就是每个li的背景坐标
          // 设置背景位置数值：定义变量
          var index = i * 44;
          // 设置背景位置时候注意位置是负值变量  还要注意位置的拼接
          lis[i].style.backgroundPosition = "0 -" + index + "px";
          // 注意位置是负值操作
        }
      </script>

4.案例：焦点框获取与失去焦点效果 

• 获取元素
• 设置获取焦点事件：判断input值是不是默认值（静态页面中自定义的value值）
  • 如果是就执行：当前input的值为空
  • 如果不是执行：当前内容色伪其他颜色
• 设置焦点失去事件：判断input值是不是为空
  • 如果是就执行：当前input的值为默认值
  • 如果不是执行：当前页面内容颜色为灰色

  <script>
      // 1.获得元素
      var text = document.querySelector("input");
      //   2.注册事件
      //   获得焦点
      text.onfocus = function () {
        // 判断是不是默认文字
        if (this.value === "手机") {
          this.value = "";
        }
        this.style.color = "green";
      };
      //   失去焦点
      text.onblur = function () {
        if (this.value === "") {
          this.value = "手机";
        }
        this.style.color = "#999";
      };
    </script>

5.案例：判断输入值是不是规定范围密码

• 设置静态页面
• 提前设置好类名新样式：className
• 获取元素
• 设置焦点失去：判断里面内容
  • 如果是：小于6并大于16   非范围内数值长度
  • 则修改元素className：之前的样式+新样式
  • 若果不是：同理

       <script>
          // 首先判断事件是表单失去焦点blur
          //   判断如果输入正确：信息绿色 +图标正确
          //   如果输入错误：信息红色+图标错误
          //   因为里面的样式修改较多：采用className
    
          //   1.获取元素
          var ipt = document.querySelector("#ipt");
          var message = document.querySelector(".message");
          //   2.注册事件 失去焦点
          ipt.onblur = function () {
            // 根据里面的长度进行判断
    
            if (this.value.length < 6 || this.value.length > 16) {
              message.className = "message wrong";
            } else {
              message.className = "message right";
            }
          };
        </script>

代码007普通

打赏 收藏 海报 链接