querySelector对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

我不是这里的专家，所以这可能是可以优化的，但是通过一个数组/对象列表，您需要遍历每一个对象

用https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Object/assign更新，所以这个版本至少可以在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>

​