Javascript元素选择器

Javascript Elements Selector

本文关键字：选择器 元素 Javascript      更新时间：2023-09-26

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

有什么建议或帮助吗?

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()。如果你确实需要IE7的支持，有一些polyfill可以在IE7中给你document.querySelectorAll()，但是在那一点上，你可能只想使用一个更好的预构建选择器库来解决这个问题，它也更优化了性能。

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

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

相关文章：