Javascript 如何解析querySelectorAll选择器引擎的结果&允许方法链接？

简化示例代码：

var $ = function(selector, node) { // Selector engine
    var selector = selector.trim(), node = node || document.body;
    if (selector != null) {
        return Array.prototype.slice.call(node.querySelectorAll(selector), 0); }
    }
}

我想这样使用它…：

$("div").innerHTML='It works!';

$("div")[0].innerHTML='It works only on the specified index!';

$("div").innerHTML='It works!';

$("div")[0].innerHTML='It works only on the specified index!';

…不是这样的…：

$("div").innerHTML='It works!';

$("div")[0].innerHTML='It works only on the specified index!';

$("div").innerHTML='It works!';

$("div")[0].innerHTML='It works only on the specified index!';

……或者：

for(i=0;i<$('div');i++) {
        $("div")[i].innerHTML='It works great but it's ugly!';
}

这是我得到的最接近的。我希望链接能够工作，并与本机方法兼容：

if(!Array.prototype.innerHTML) { 
    Array.prototype.innerHTML = function(html) {
        for (var i = 0; i < this.length; i++) {
            this[i].innerHTML = html;
        }
    }
}

$("div").innerHTML('It works, but it ruins method chaining!');

我决定构建这个引擎来更好地学习JavaScript；它正在工作，但我希望我能从Stack Overflow的善良成员那里学到更多。任何帮助都将不胜感激

我想这样使用它…：

$("div").innerHTML='It works!';

$("div")[0].innerHTML='It works only on the specified index!';

$("div").innerHTML='It works!';

$("div")[0].innerHTML='It works only on the specified index!';

…不是这样的…：

$("div").innerHTML='It works!';

$("div")[0].innerHTML='It works only on the specified index!';

$("div").innerHTML='It works!';

$("div")[0].innerHTML='It works only on the specified index!';

听起来您希望将结果集上的assigning to innerHTML分配给所有结果的innerHTML

要做到这一点，您必须直接或间接地使用函数

直接：

var $ = function(selector, node) { // Selector engine
    var selector = selector.trim(),
        node = node || document.body,
        rv;
    if (selector != null) {
        rv = Array.prototype.slice.call(node.querySelectorAll(selector), 0); }
        rv.setInnerHTML = setInnerHTML;
    }
    return rv;
}
function setInnerHTML(html) {
    var index;

    for (index = 0; index < this.length; ++index) {
        this[index].innerHTML = html;
    }
}

// Usage
$("div").setInnerHTML("The new HTML");

在这里，我们使用为属性定义一个setter

在下面的评论中你说

---

我有一些原型，当单独连接到$function时可以工作。示例：$'div'.makeClass'this'；当它们被锁在一起时就不起作用了。示例：$'div'.makeClass'this'.takeClass'that'

要使链接工作，您必须返回此；因此makeClass的结尾将返回此；。这是因为当你链接时，比如obj.foo.bar，你在调用返回值foo的bar。因此，要使链接工作，请确保foo返回调用foo的对象

我想这样使用它…：

$("div").innerHTML='It works!';

$("div")[0].innerHTML='It works only on the specified index!';

$("div").innerHTML='It works!';

$("div")[0].innerHTML='It works only on the specified index!';

…不是这样的…：

$("div").innerHTML='It works!';

$("div")[0].innerHTML='It works only on the specified index!';

$("div").innerHTML='It works!';

$("div")[0].innerHTML='It works only on the specified index!';

听起来您希望将结果集上的assigning to innerHTML分配给所有结果的innerHTML

要做到这一点，您必须直接或间接地使用函数

直接：

var $ = function(selector, node) { // Selector engine
    var selector = selector.trim(),
        node = node || document.body,
        rv;
    if (selector != null) {
        rv = Array.prototype.slice.call(node.querySelectorAll(selector), 0); }
        rv.setInnerHTML = setInnerHTML;
    }
    return rv;
}
function setInnerHTML(html) {
    var index;

    for (index = 0; index < this.length; ++index) {
        this[index].innerHTML = html;
    }
}

// Usage
$("div").setInnerHTML("The new HTML");

在这里，我们使用为属性定义一个setter

在下面的评论中你说

---

我有一些原型，当单独连接到$function时可以工作。示例：$'div'.makeClass'this'；当它们被锁在一起时就不起作用了。示例：$'div'.makeClass'this'.takeClass'that'

---

要使链接工作，您必须返回此；因此makeClass的结尾将返回此；。这是因为当你链接时，比如obj.foo.bar，你在调用返回值foo的bar。因此，要使链接工作，请确保foo返回调用foo的对象。

这就是工作原理；这与我在前面的示例中给出的语法略有不同，但最终结果是相同的。我得到了其他Stack Exchange成员的帮助，再次感谢大家

var $ = function(selector, node) { // Selector engine
    var selector = selector.trim(), node = node || document.body;
    if (selector != null) {
        return Array.prototype.slice.call(node.querySelectorAll(selector), 0); }
    }
}

if(!Array.prototype.html) { 
    Array.prototype.html = function(html) {
        for (var i = 0; i < this.length; i++) {
            this[i].innerHTML = html;
        }
        return this; //<---- Silly me, my original code was missing this.
    }
}

输出：

<div>hello world</div>

---

干杯

这就是有效的方法；这与我在前面的示例中给出的语法略有不同，但最终结果是相同的。我得到了其他Stack Exchange成员的帮助，再次感谢大家

var $ = function(selector, node) { // Selector engine
    var selector = selector.trim(), node = node || document.body;
    if (selector != null) {
        return Array.prototype.slice.call(node.querySelectorAll(selector), 0); }
    }
}

if(!Array.prototype.html) { 
    Array.prototype.html = function(html) {
        for (var i = 0; i < this.length; i++) {
            this[i].innerHTML = html;
        }
        return this; //<---- Silly me, my original code was missing this.
    }
}

输出：

<div>hello world</div>

---

干杯

我将回顾一些相关的库和框架.html和.text源代码，了解它们是如何实现的，比如jQuery、MooTools、Prototype、YUI。我将回顾一些相关的库和框架.html和.text源代码，了解它们是如何实现的，比如jQuery、MooTools、Prototype、YUI。感谢您的快速回复。我只是出于演示的目的使用innerHTML。我真的很好奇，看看我是否可以将该引擎与其他方法一起使用。@o0110o:除了获取匹配列表之外，您不能使用选择器引擎。如果你想在结果对象上有更多的方法，你有两个选择：要么在创建每个实例时将它们分配给它，要么这可能是更好的选择，使结果对象不是真正的数组，但是你用一个原型创建的东西有你想要添加的附加功能。谢谢你的建议T.J.我有一些原型，当单独连接到$function时可以工作。示例：$'div'.makeClass'this'；当它们被锁在一起时就不起作用了。示例：$'div'.makeClass'this'.takeClass'that'；这就是为什么我想将返回的每个项的结果推送到方法中，如果可能的话。@o0110o:要使链接有效，您必须从每个函数中返回此结果，这样makeClass的结尾才会返回此结果。感谢您的快速回复。我只是出于演示的目的使用innerHTML。我真的很好奇，看看我是否可以将该引擎与其他方法一起使用。@o0110o:除了获取匹配列表之外，您不能使用选择器引擎。如果你想在结果对象上有更多的方法，你有两个选择：要么在创建每个实例时将它们分配给它，要么这可能是更好的选择，使结果对象不是真正的数组，但是你用一个原型创建的东西有你想要添加的附加功能。谢谢你的建议T.J.我有一些原型，当单独连接到$function时可以工作。示例：$'div'.makeClass'this'；当它们被锁在一起时就不起作用了。示例：$'div'.makeClass'this'.takeClass'that'；这就是我想要的原因

---

要将返回的每个项的结果推送到方法中，如果可能的话。@o0110o:要使链接起作用，您必须从每个函数返回它，这样makeClass的结尾才会返回它。