JavaScript 学习笔记 基础篇５（ＤＯＭ操作补充及案例）

 全选框：

 <script>
    var friuts = document.getElementsByClassName("fruit");
    var _all = document.getElementsByClassName("all")[0];
    _all.onclick = function(){
          for(var i=0 ;i<friuts.length;i++){
           friuts[i].checked =this.checked;
        } 
    }

    for(var i=0 ;i<friuts.length;i++){    //循环遍历每个复选框,为每个复选框添加点击事件
      friuts[i].onclick = function(){
        var flag = true;
        for(var j=0 ; j<friuts.length;j++){       //每点击一次遍历查看是否所有水果复选框都被选中
          if( friuts[j].checked != true){         //若有一个复选框为被选中，就将false赋值给标志变量
            flag = false;
          }
           _all.checked = flag;                  //每点击一次将标志变量赋值给全选框
        }
      }
    }
     
  </script>

获取兄弟节点：

• ｄｏｍ对象．ｎｅｘｔＳｉｂｌｉｎｇ　　下一个节点：包含文本节点，换行也是文本节点
• ｄｏｍ对象．ｎｅｘｔＥｌｅｍｅｎｔＳｉｂｌｉｎｇ　　　下一个节点
• ｄｏｍ对象．ｐｒｅｖｏｕｓＳｉｂｌｉｎｇ　前一个节点：包含文本节点，换行也是文本节点
• ｄｏｍ对象．ｐｒｅｖｏｕｓＥｌｅｍｅｎｔＳｉｂｌｉｎｇ　　　前一个节点

选项卡：

 <script>
    var tittles = document.querySelectorAll(".tittle li");
    var imgs = document.querySelectorAll(".imgsbox img");
    for(var i=0; i<tittles.length; i++){
      // 为图片添加标题映射自定义属性——下标
      tittles[i].dataset.index =i;
      // 添加点击事件
      tittles[i].onclick = function(){
      //排他思想：将所有元素某样式清除，只赋给点击元素
       for(var j=0; j<tittles.length; j++){
         tittles[j].style.backgroundColor = "#CCCCCC";
         imgs[j].classList.remove("img-blck");
       }
       this.style.backgroundColor = "darkred";
       // 获取当前点击标题的自定义属性下标index
       var index = this.dataset.index;
       // 根据标题映射下标添加显示类
       imgs[index].classList.add("img-blck");
       
      }
    }
  </script>