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修改元素路径

     
      
  上午好
      

二、表单内容修改

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
• 遍历对象
• 设置变量运算（配合遍历初始值） 
• 在遍历过程中修改样式（驼峰命名法）

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

 

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

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

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