javascript - 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;
}