querySelector vs. querySelectorAll

Question

我在javascript中创建选择器时遇到了一些麻烦。
这是我的代码：

function __(selector){ 

    var self = {}; 
    self.selector = selector; 

    if(typeof selector == 'object'){ 
     self.element = self.selector; 
    }else{ 
     self.element = document.querySelector(self.selector); 
    } 

    // make a .css method to an element 
    self.css = function(propval){ 
     return Object.assign(self.element.style,propval); 
    } 

    return self; 
} 

而且我的html文件

<script src="js/selector.js"></script> 
<script> 
    window.onload = function(){ 
     __('p').css({'color':'red'}); 
    } 
</script> 

<p>Hello</p> 
<p>World</p> 
<p>John</p> 

上面的代码将只在第一<p>元素应用.css method。这是因为我只用了querySelector。因为querySelector只选择找到的第一个元素。并且querySelectorAll选择找到的所有元素。但是，当我尝试将我的选择器更改为querySelectorAll它不再适用于我。

Answer 1

好了，原因是querySelectorAll()返回所选元素的节点列表和的节点列表分配CSS就没有多大的效果

这就是说，实际上你需要一种方法来处理的情况下，一个单一的元素和许多相同的方式

从我的头顶，一个简单的解决方案是始终使用的阵列或节点列表和forEach()过他们，因为这两种实现这个方法，像这样：

function __(selector){ 

    var self = {}; 
    self.selector = selector; 

    if(typeof selector == 'object'){ 
     self.elements = [self.selector]; 
    }else{ 
     self.elements = document.querySelectorAll(self.selector); 
    } 

    // make a .css method to an element 
    self.css = function(propval){ 
     self.elements.forEach(function(element){ 
     Object.assign(element.style, propval); 
     }); 
    } 

    return self; 
} 

Answer 2

我在这里没有专家，所以这大概可以优化，但使用对象的数组/列表你通过每一个

与a polyfill所以这一块工作的最新至少IE11需要循环/ 10/9

function __(selector){ 
 

 
    var self = {}; 
 
    self.selector = selector; 
 

 
    if(typeof selector == 'object'){ 
 
     self.element = self.selector; 
 
    }else{ 
 
     self.elements = document.querySelectorAll(self.selector); 
 
    } 
 

 
    // make a .css method to an element 
 
    self.css = function(propval){ 
 
     if (self.elements) { 
 
     for (var i = 0; i < self.elements.length; i++) { 
 
      Object.assign(self.elements[i].style,propval); 
 
     } 
 
     return; 
 
     } else { 
 
     Object.assign(self.element.style,propval); 
 
     } 
 
    } 
 

 
    return self; 
 
} 
 

 
if (typeof Object.assign != 'function') { 
 
    Object.assign = function (target, varArgs) { // .length of function is 2 
 
    'use strict'; 
 
    if (target == null) { // TypeError if undefined or null 
 
     throw new TypeError('Cannot convert undefined or null to object'); 
 
    } 
 

 
    var to = Object(target); 
 

 
    for (var index = 1; index < arguments.length; index++) { 
 
     var nextSource = arguments[index]; 
 

 
     if (nextSource != null) { // Skip over if undefined or null 
 
     for (var nextKey in nextSource) { 
 
      // Avoid bugs when hasOwnProperty is shadowed 
 
      if (Object.prototype.hasOwnProperty.call(nextSource, nextKey)) { 
 
      to[nextKey] = nextSource[nextKey]; 
 
      } 
 
     } 
 
     } 
 
    } 
 
    return to; 
 
    }; 
 
}

<p>Hello</p> 
 
<p>World</p> 
 
<p>John</p> 
 
<div>Albert</div> 
 
<script> 
 
    window.onload = function(){ 
 
     __('p').css({'color':'red'}); 
 
     __(document.querySelector('div')).css({'color':'blue'}); 
 
    } 
 
</script>