1

我正在创建一个 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".

任何提示或帮助？

4

1 回答 1

3

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 支持，可以在 IE7 中提供一些可用document.querySelectorAll()的 polyfill，但此时，您可能只想使用更好的预构建选择器库之一来解决这个问题，这些库也更优化了性能。

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

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

于 2013-03-23T07:21:18.263 回答