对 Sizzle 对象执行 DOM 方法时出错答案

【问题标题】：Error performing DOM methods on Sizzle objects对 Sizzle 对象执行 DOM 方法时出错
【发布时间】：2014-05-17 01:08:23
【问题描述】：

我正在尝试使用 Sizzle（不使用 jQuery）进行 DOM 选择。我将 Sizzle 选择与本机 JS 混合以构建一些动画功能。在 Sizzle 对象上执行 DOM 方法时遇到错误。例如：

Sizzle('#masthead-copy').appendChild(foo);

结果：Object has no method 'appendChild'。但以下工作：

document.getElementById('masthead-copy').appendChild(foo);

同样的情况也出现在类似的方法上：

Sizzle('#masthead-images').getElementsByTagName('foo');

但以下工作：

document.getElementById('masthead-images').getElementsByTagName('foo');

似乎 Sizzle 在所有选择（甚至在 ids 上）都返回一个数组，这可以解释这里的问题。有没有常见的解决方法？

【问题讨论】：

Sizzle 将始终返回一个数组。如果它返回一个 NodeList，你也会遇到同样的问题。您不需要解决方法。你只需要做你一直对集合做的事情。使用循环。
您的意思是getElementById 示例？那是因为该方法不返回集合。它返回单个节点，所以自然不需要循环。如果您总是按 ID 获取，那么只需抓取集合中的第一个节点。
所以如果Sizzle 返回一个ID 数组，我想我可以将它们引用为Sizzle('#masthead-images')[0]?
@cookiemonster 说的是真的，即使只有一个元素，Sizzle 总是会返回一个数组。
问题是，为什么要使用Sizzle通过ID获取元素

【解决方案1】：

如 cmets 中所示，Sizzle 在所有选择上都返回一个数组，因此使用 Sizzle 选择 id 需要对结果数组中的第一个（唯一）项目的引用：

Sizzle('#masthead-copy')[0].appendChild(foo);

【讨论】：