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>