DOM基础(操作元素-复杂、元素属性)

一、复杂元素操作

1. 排他思想

 <script>
      // 1.获取所有按钮元素
      var btns = document.getElementsByTagName("button");
      // 进行遍历获取元素
      for (var i = 0; i < btns.length; i++) {
        // 通过循环对所有的元素都添加绑定事件
        btns[i].onclick = function () {
          // 1.先把所有的按钮背景颜色去掉
          for (var i = 0; i < btns.length; i++) {
            btns[i].style.backgroundColor = "";
          }
          //2.然后将当前的背景颜色改为red
          this.style.backgroundColor = "red";
        };
      }
    </script>

• 实现效果：

  • 当前按钮（元素）触发事件
  • 遍历所有元素
    • 清除所有同类元素的执行函数
    • 执行当前元素事件

 2. 案例-背景换肤效果

1. 实现效果：点击哪个图片，背景图就会显示那个图片

  <script>
      // 1.获取元素（增进写法：连续写）
      var imgs = document.querySelector(".box").querySelectorAll("img");
      console.log(imgs);
      //   2.循环注册事件
      for (var i = 0; i < imgs.length; i++) {
        imgs[i].onclick = function () {
          // this.src就是点击图片的路径
          //把这个路径给body
          document.body.style.backgroundImage = "url(" + this.src + ")";
        };
      }
    </script>

 

• 设置好静态页面
• 获取到元素
• 遍历
• 注册事件
• 执行函数内容：注意执行函数中存在获取到body对象：document.body

3. 案例-隔行变色

 

   <script>
      // 1.获取元素：tbody里面所有的行
      var trs = document.querySelector("tbody").querySelectorAll("tr");
      //   2.利用循环注册事件
      for (var i = 0; i < trs.length; i++) {
        // 3.鼠标经过事件
        trs[i].onmouseover = function () {
          // 利用样式类名进行修改
          this.className = "bg";
        };
        // 4.鼠标移出
        trs[i].onmouseout = function () {
          // 空的样式类名表示没有操作
          this.className = "";
        };
      }
    </script>

 

1. 执行效果：鼠标移动到哪一行就会修改那一行的背景色 

•  布局静态页面
• 获取所有行元素
• 遍历
• 设置当前元素的鼠标移动：mouseover事件
• 修改当前className
• 设置当事件鼠标移开：mouseout事件
• 再次修改当前的className为其他name或者空：根据自己的布局进行设置

4. 案例-表单全选功能

    <script>
      //选中上面则是全选  再点击就是全部取消
      // 1.获取元素
      //   获取全选框
      var j_cbAll = document.getElementById("j_cbAll");
      //   获取复选框
      var j_tbs = document.getElementById("j_tb").getElementsByTagName("input");
      // 2.绑定事件
      //   上面影响下面的按钮
      j_cbAll.onclick = function () {
        // 注意默认点击有一个input值：checked
        // this.checked返回true和false
        for (var i = 0; i < j_tbs.length; i++) {
          // 下面的点击框= 总点击框(赋值方)
          j_tbs[i].checked = this.checked;
        }
      };

      // --------------------------------------

      //2.复选框需要全部选中,上面全选才能选中:给下面所有复选框绑定点击事件,每次点击,都要循环查看下面所有的复选框是否有没选中的，如果有，上面全选就不选中
      for (var i = 0; i < j_tbs.length; i++) {
        j_tbs[i].onclick = function () {
          // 每次点击下面的复选框都要循环检查小按钮使得否都被选中
          var flag = true;
          //类似于排他:遍历所有选框判断里面是个否有没选中的
          for (var i = 0; i < j_tbs.length; i++) {
            if (!j_tbs[i].checked) {
              // 作为排除：任何一个没有被选中就是未选中状态
              flag = false;
            }
          }
          // 总点击事件选中样式=小的点击样式：很具true返回值进行判断
          j_cbAll.checked = flag;
        };
      }
    </script>

 

1. 执行效果

•  点击全选：所有复选框同样获得点击效果
• 点击所有复选框：全选复选框同样获得点击效果
• 当缺少任何一个复选框时候全选框无法获得点击效果

      2. 执行分析

主要使用复选框的checked（true和false）和排思想

• 首先获取到元素：全选复选框和多个复选框伪数组
• 全选框点击（复选框同样点击效果）事件
  • 遍历多个复选框
  • 设置当前所有复选框的点击效果：checked = 全选框的checked
• 遍历复选框并给当前复选框设置点击事件
  • 设置一个判断值：布尔值（默认是点击）
    • 在执行这个布尔值之前遍历多个复选框
    • 判断如果点击事件没有被点击
    • 则修改判断值为false
  • 执行当前对象的点击事件 = 这个布尔值

---

二、对象属性值

1.  获取属性方式

element.属性   ：基础获取自带对象值

     console.log(div.className);

---

element.getAttribute（'属性'）    ：获取自定义对象属性值

      console.log(div.getAttribute("class"));

---

element.dataset（直接获取到以data开头的属性的集合）

element.dataset.name

element.dataset['name']      ：H5新增两个获取自定义对象属性值

首先需要建立以data开头的：dataset开头获取

接着才能使用获取daata开头的属性

      console.log(div.dataset.index);
      console.log(div.dataset["index"]);

 

---

2.设置自定义属性

element.属性名= '值' （设置内置）  基础设置

    div.className = "one";

element.setAttribute('属性名'，'值')   自定义设置

 div.setAttribute("data-time", "18");

element.dataset.属性名= '值'     H5新增自定义设置

 div.dataset.index = "nihao";

 

---

3. 清除元素属性值 

 element.属性名 = ''    基础设置：只是清除值保留属性名

 div.className = "";

 element.setAttribute('属性名')   自定义设置：全部清除

div.removeAttribute("index");

 element.dataset.属性名= ''     H5新增自定义清除：只是清除值保留属性名

 

    div.dataset.index = "nihao";

---

 

4. 案例-详情页tab栏点击切换 

 

 <script>
      //  1. 获取元素
      var tab_list = document.querySelector(".tab_list");
      var lis = tab_list.querySelectorAll("li");
      var items = document.querySelectorAll(".item");

      //   2.遍历+绑定事件
      for (var i = 0; i < lis.length; i++) {
        // 点击事件做完之后：遍历设置自定义属性（方便后面的显示功能）
        // index的属性值对应着点击事件第几个
        lis[i].setAttribute("index", i);
        lis[i].onclick = function () {
          //选项卡点击模块（排他思想）
          // 排他思想：清除所有class类
          for (var i = 0; i < lis.length; i++) {
            lis[i].className = "";
          }
          //留下自己
          this.className = "current";
          // -----------------------------------------------
          //下面显示内容模块
          //li添加自定义属性：属性值从0开始编号
          //   1.得到当前index的索引号
          var index = this.getAttribute("index");

          //排他思想
          // 先把所有显示内容隐藏
          for (var i = 0; i < items.length; i++) {
            items[i].style.display = "none";
          }
          // 单独把点击到的内容显示出来
          items[index].style.display = "block";
        };
      }
    </script>

1. 实现效果：点击哪个模块，下方的内容也会随着改变

2. 执行分析

•  首选获取所有用到的元素
• 遍历按钮
  • 设置一个属性为当前遍历下标值
  • 给当前元素设置点击事件
  • 利用排他思想
    • 遍历并清除所有点击元素样式
  • 给当前点击元素设置点击事件
  • 获取到当前的时间的下标元素
  • 再次排他思想：清除所有内容显示
  • 单独显示与当前元素下标匹配的样式