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");

如果你真的想让你自己的选择器匹配代码，你将不得不编写代码来解析你的select，然后编写代码来遍历整个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");

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

Javascript元素选择器

1 个答案: