Javascript 元素选择器

Question

我正在创建一个 Javascript 选择器，以便它可以促进在其他方法中对这些元素的操作。

我的函数是这样调用的:

//  Selecting three groups of elements in context 'document'
myFunc(["p", "div#id", "ul li"], document);

到目前为止，我的函数填充了一个表示要选择的元素的数组:

//  Representation corresponding to the selection above
matches[0] = [["p"]]
matches[1] = [["div", "#id"]]
matches[2] = [["ul"], ["li"]]

虽然我试过了，但我无法获得任何这些元素，除了最简单的元素:"p"。

有什么提示或帮助吗？

Answer 1

DOM 搜索与 CSS 选择器匹配的项目是一个已解决的问题。我看不出有什么理由重新发明轮子并处理所有不同的浏览器和性能优化。对于现代浏览器，只需使用 document.querySelectorAll() 并将合法的 CSS 选择器传递给它。

为了与旧浏览器(如 IE7)兼容，您可以选择一个现成的并经过测试的选择器库。如果您要进行大量的 DOM 操作，那么您可能需要类似 jQuery 的东西，它具有内置的跨浏览器选择器引擎并支持许多其他 DOM 操作。在 jQuery 中，您的选择器将是这样的:

// returns jQuery object that has array of DOM objects in it
var objects = $("p, div#id, ul li");

或者，如果您只想要一个经过验证的选择器库，您可以选择 Sizzle(这是 jQuery 内部使用的引擎)。在 Sizzle 中，它将是:

// returns array of DOM elements
var objects = Sizzle("p, div#id, ul li");

如果您真的想制作自己的选择器匹配代码，您将不得不编写代码来解析您的选择，然后编写代码遍历整个 DOM，然后创建代码以将每种类型的选择器与给定的匹配DOM 中的对象。当免费、经过测试和性能优化的库已经可供您使用时，我看不出为什么有人会想要重新发明所有代码。您实际上可以在几分钟内完成。

或者，如果您不需要 IE 7 支持，您可以只使用 document.querySelectorAll()。如果您确实需要 IE 7 支持，可以使用一些 polyfill 为您提供 IE7 中的 document.querySelectorAll()，但此时，您可能只想使用一个更好的预建选择器库为了解决这个问题，也对性能进行了更多优化。

// returns a NodeList (an array-like list of nodes)
var objects = document.querySelectorAll("p, div#id, ul li");

如果您真的想构建自己的选择器库，请解释为什么以及您需要支持哪些选择器，以便我们更好地建议如何继续。