使用css选择器查​​找DOM元素的最佳方法

Question

使用css选择器查​​找Dom元素的最简单方法是什么，而不使用库？

function select( selector ) {
 return [ /* some magic here please :) */ ]
};

select('body')[0] // body;

select('.foo' ) // [div,td,div,a]

select('a[rel=ajax]') // [a,a,a,a]

这个问题纯粹是学术性的。我有兴趣了解这是如何实现的以及“障碍”是什么。这个函数的预期行为是什么？ （返回数组，或返回第一个Dom元素等）。

Answer 1

除了自定义黑客外，在最近的浏览器中，您可以使用W3C Selectors API Level 1中定义的本机方法，即 document.querySelector（）和 document.querySelectorAll（） ：

var cells = document.querySelectorAll("#score > tbody > tr > td:nth-of-type(2)");

Answer 2

现在，做这种没有图书馆的东西是疯狂的。但是，我想你想知道这些东西是如何工作的。我建议你查看jQuery的源代码或其他一个javascript库。

考虑到这一点，选择器函数必须包含许多if / else / else if或switch case语句，以便处理所有不同的选择器。例如：

function select( selector ) {
 if(selector.indexOf('.') > 0) //this might be a css class
   return document.getElementsByClassName(selector);
 else if(selector.indexOf('#') > 0) // this might be an id
   return document.getElementById(selector);
 else //this might be a tag name
   return document.getElementsByTagName(selector);
 //this is not taking all the different cases into account, but you get the idea.
};

Answer 3

创建选择器引擎并非易事。我建议从已经存在的东西中学习：

• Sizzle（由Resig创建，在jQuery中使用）
• Peppy（由James Donaghue创作）
• Sly（由Harald Kirschner创作）

Answer 4

这是我用过一段时间的好片段。它非常小巧整洁。它支持所有常见的CSS选择器。

http://www.openjs.com/scripts/dom/css_selector/

Answer 5

没有内置的方式。从本质上讲，如果您决定不使用jQuery，那么您将在代码中复制它的错误版本。