创建一个函数来获取选择器，例如使用纯JavaScript的jquery

Question

我已经厌倦了将jquery包含在简单的项目中，但是我已经习惯了使用它，并且我试图摆脱对它的依赖。 我正在尝试创建一个函数，该函数将给人一种获得类和标签之类的选择器的感觉。 示例： $('selector').innerHTML = ".something"; 。 我刚刚像这样逐个循环：

var classElements = document.querySelectorAll('.something');
for (var i = classElements.length - 1; i >= 0; i--) {
   classElements[i].innerHTML = "This Is A Div";
} 

但是我想创建一个函数，使我可以通过选择器进行循环，而不必为要查找的所有内容编写for循环。 因此，我可以像在$('.something').innerHTML = "something";上面这样写它$('.something').innerHTML = "something";

到目前为止，这就是我所拥有的，但是它只会获得每个选择器的第一个，而不会获得所有选择器。 不用说，我很固执，对这个主题的阅读越多，我就越困惑。 我想知道是否有人可以向我指出我的思维有缺陷的正确方向，或者解释jquery如何做到这一点。 这是我的代码：

window.getElements = function(selector) {
    var selectors = document.querySelectorAll(selector);
    for (var i = selectors.length - 1; i >= 0; i--) {
        var elements = selectors[i];
    }
    return elements;
};

getElements(".something").innerHTML = "something";

这是一个小提琴

Answer 1

这是您的操作方式。 我已经完成了您所要求的操作，即允许您使用所有本机功能，而不是使用硬币包装器。 jQuery返回自己的作用在选择器上的api。 我所做的是创建一个选择器，使您可以对找到的每个元素进行操作

 window.getElements = function(selector,cb) { var selectors = document.querySelectorAll(selector); [].forEach.call(selectors, cb); }; getElements(".something", function(el){el.innerHTML = "ha"}); getElements("#one", function(el){el.style.background = "red" }); 

它采用找到的dom列表，将其转换为数组，然后在传递本机代码的地方调用传递的函数

这是一个小提琴

https://jsfiddle.net/y52f4wh8/5/

jQuery的工作方式不同：

 window.jquery = function(selector,cb) { var selectors = document.querySelectorAll(selector); function command(cb) { [].forEach.call(selectors, cb); }; // Here we return our own api that uses the command function to act on // our selected list. return { html: function(str){ command(function(el){ el.innerHTML=str; }); }, bg: function(color){ command(function(el){ el.style.background = color; }); } } }; // The jquery way! jquery(".something").html("ha"); 

Answer 2

getElements(".something").innerHTML = "something";

这不起作用，因为您的函数获取并返回了所有元素，即NodeList ，但是它不会像jQuery那样将方法自动应用于集合中的每个元素。 为此，您必须将元素转换为数组，然后使用循环或其他函数在每个元素上实际调用该函数。

编辑 ：要清楚，您不能只在NodeList上调用NodeList.innerHTML = '' ，因为innerHTML已应用于一个元素。 jQuery的内部照顾的两个元素的集合，并为你的方法应用 。

编辑＃2 ：在更仔细地检查了您的功能之后，我意识到还有其他问题，但是我上面写的仍然是您想要学习的基础。

您可以使用类似的方法获取元素吗？：

function getElements(elements) {
    return [...querySelectorAll(elements)]
}

但是，在节点上应用功能将因情况而异，因为其中许多功能以不同的方式应用。

Answer 3

JQuery的选择器部分称为Sizzle 。 它具有所需的所有功能，但JQuery的其他部分未提供。

如果您想了解有关其背后的javascript的更多信息，建议您查看Sizzle的源文件。

Answer 4

jQuery本质上是NodeList的包装对象，它为DOM操作添加了更多功能。 如果要创建自己的包装器对象，该对象为所有Element API的批量版本定义函数，则可以这样做，但是您也可以使用jQuery或某些派生类。

如果您想要一个非常轻量级的代理对象来对DOM元素执行批量操作，则ES6中有一个Proxy对象，可以很容易地做到这一点，但不提供IE支持。

 const $ = function(selector) { const nodeList = document.querySelectorAll(selector); return new Proxy(nodeList, { set: function(target, property, value) { for (let i = 0; i < target.length; i++) { target[i][property] = value; } }, get: function(target, property) { return target[0] && target[0][property]; } }); }; console.log($('p').innerHTML); $('p').innerHTML = 'Bulk assignement!'; 

 <p>AB C</p> <p>1 2 3</p> <p>Do Re Mi</p> 

Answer 5

最好避免的一种方法是在NodeList上为innerHTML定义一个setter。

 Object.defineProperty(NodeList.prototype, 'innerHTML', { set(text) { [...this].forEach(elt => elt.innerHTML = text); } }); const $ = selector => document.querySelectorAll(selector); $('.foo').innerHTML = "it works"; 

 <div class="foo"></div> <div class="foo"></div>