document.querySelectorAll遍历&

前言

在线练习js代码时，给一系列元素绑定点击事件，发现document.querySelector()不能直接添加点击事件，会报错（可能是因为jQuery用多了，限制了我的想象力...）

参考资料

MDN：querySelector
MDN：ParentNode

注意MDN：ParentNode中的描述：

ParentNode.querySelector()：返回以当前元素为根元素，匹配给定选择器的第一个元素Element

ParentNode.querySelectorAll()：返回一个NodeList，表示以当前元素为根元素的匹配给定选择器组的元素列表

这就是为啥querySelector()可以直接加点击事件，而querySelectorAll()不能直接加点击事件的原因了；

同时，ParentNode.querySelectorAll()的结果是NodeList数组，但是又不是一般的js数组（Array），所以也不能直接调用Array的方法。

正确的使用方式

借助Array的forEach方法进行遍历，对每个Element进行事件绑定

Array方法的使用

这里以forEach函数为例

• 正常方式

[1,2,3].forEach(function(item,index,input){
  console.log(item);
});

• 其他函数借用

Array.prototype.forEach.call([1,2,3],function(item,index,input){
    console.log(item);
});

或者

[].forEach.call([1,2,3],function(item,index,input){
    console.log(item);
});

querySelectorAll的forEach遍历

[].forEach.call(color_btn,function(item,index,input){
  item.addEventListener('click',()=>(alert("text")));
});

或者是

Array.prototype.forEach.call(color_btn,function(item,index,input){
  item.addEventListener('click',function(){
    alert("text");
  });
});