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> 

Код выше будет применяться только .css method в первом <p> элемента. Это потому, что я использовал только querySelector. Поскольку querySelector выбирает только первый найденный элемент. И querySelectorAll выбирает все найденные элементы. Но когда я пытаюсь изменить свой селектор на querySelectorAll, он больше не работает для меня.

Answer 1

Ну, причина querySelectorAll() возвращает Nodelist выбранных элементов и назначая CSS к NodeList не сделали бы большую часть эффекта

Это говорит, по существу, вам нужен способ, чтобы обработать случай один элемент и многие таким же образом

из верхней части моей головы, это простое решение может быть всегда использовать массивы или NodeList и 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>