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

在不使用库的情况下，使用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元素等）。

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

现在，在没有库的情况下做这种事情是疯狂的。但是，我想你应该想知道这些东西是如何工作的。我建议您查看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.
};

---

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

• （由Resig创建，用于jQuery）
• （詹姆斯·多纳霍创作）
• （哈拉尔德·克什纳创作）

---

这是一个我曾多次使用过的好片段。它真的又小又整洁。它支持所有常见的css选择器

---

除了自定义黑客之外，在最近的浏览器中，您可以使用中定义的本机方法，即和：

---

公平地说，JQuery不是唯一一个提供选择器风格功能的库，它只是最突出的库。我所说的“没有jQuery”，是指没有一个可供选择的外部库。不一定——看看Sizzle（jQuery的引擎），你不会看到任何这些。这在现代浏览器中是不必要的。querySelectedAll（）是一个更好的解决方案。很棒的链接！真有趣。特别是performance test runner.Docs和浏览器支持这一点现在应该是选择的答案-除了IE7之外，所有现代浏览器都支持吗？2013年8月，这对我来说已经足够好了！使用querySelectorAll时，您将获得一个元素数组，因此如果您需要一个元素，您可以在末尾添加[0]。或者你可以简单地使用document.querySelector（）十年前你接受的这个问题的答案已经过时了。将您的选择更改为更适合今天的选择是值得的：

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