jQuery选择器对应的DOM API ——选择元素

英文原文：http://blog.garstasio.com/you-dont-need-jquery/selectors/愚人码头注：

原作者的写这文章的意图是让我们抛弃jQuery,You Don’t Need jQuery!提倡我们使用原生的JavaScript，所以收集整理了jQuery语法对应的DOM API ；

原作者参数的原因可以看这里：http://blog.garstasio.com/you-dont-need-jquery/why-not/ ，个人同意他的观点，简单的页面或应用，完全可以抛弃jQuery；但是出于开发效率和开发成本的考虑，我还是比较喜欢用jQuery。

本人翻译或者说拷贝这篇文章的原因是：有一部分前端只会用jQuery，什么都网上找插件，甚至滥用jQuery，一点原生的JavaScript都不会写。QQ上，微博私信经常收到类似的基础问题。前端就是折腾的活，要从基础系统的学习。所以翻译了这篇文章，希望对新手和不写原生脚本的同学有一点点的帮助。

选择元素

有多少次你看到一个Web应用程序或库使用jQuery执行简单琐碎的元素选择？有多少次你这样写:

$(#myElement')

? 或者这样

$('.myElement')

?嘘……你不需要用jQuery选择元素！这使用DOM API也很容易做到。

IDs

CSS Classes

Tag Names

Attributes

Pseudo-classes

Children

Descendants

Exclusion Selectors

Multiple Selectors

See a Pattern?

Filling in the Gaps

Next in this Series

By ID

jQuery

// returns a jQuery obj w/ 0-1 elements

$('#myElement');

DOM API

// IE 5.5+

document.getElementById('myElement');

…或者…





// IE 8+

document.querySelector('#myElement');

这两种方法返回一个

Element

（元素）。 需要注意的是使用

getElementById

比使用

querySelector

更高效。

请问jQuery的语法提供任何好处吗？我没有看到一个。你呢？

By CSS Class

jQuery

// returns a jQuery obj w/ all matching elements

$('.myElement');

DOM API

// IE 9+

document.getElementsByClassName('myElement');

…或者…

// IE 8+

document.querySelectorAll('.myElement');

第一个方法返回的

HTMLCollection

，并且效率最高的是第二个方法。

querySelectorAll

总是返回一个

NodeList

（节点列表）。

同样，这里真的很简单的东西。为什么要使用jQuery？

By Tag Name

举个例子，选择页面上所有的

<div>

元素：

jQuery

$('div');

DOM API

// IE 5.5+

document.getElementsByTagName('div');

…或者…

// IE 8+

document.querySelectorAll('div');

正如预期的那样，

querySelectorAll

（返回

NodeList

）比

getElementsByTagName

（返回

HTMLCollection

）效率低。

By Attribute（属性）

选择所有”data-foo-bar”值为”someval”的元素：

jQuery

$('[data-foo-bar="someval"]');

DOM API

// IE 8+

document.querySelectorAll('[data-foo-bar="someval"]');

DOM API和jQuery语法非常相似。

By Pseudo-class（伪类）

选择所有在指定表单中的当前无效（:invalid 伪类）字段。假设我们的表单 ID为”myForm”。

jQuery

$('#myForm :invalid');

DOM API

// IE 8+

document.querySelectorAll('#myForm :invalid');

Children（子元素）

选择一个特定元素的所有子元素。 假设我们的特定元素 ID为 “myParent”。

jQuery

$('#myParent').children();

DOM API

// IE 5.5+

// NOTE: This will include comment and text nodes as well.

document.getElementById('myParent').childNodes;

…或者…

// IE 9+ (ignores comment & text nodes).

document.getElementById('myParent').children;

但是，如果我们只想找到特定的子元素呢？比如，有 “ng-click”属性的子元素？

jQuery

$('#myParent').children('[ng-click]');

…或…

$('#myParent > [ng-click]');

DOM API

// IE 8+

document.querySelector('#myParent > [ng-click]');

Descendants（后代元素）

找到#myParent下面所有”a”元素。

jQuery

$('#myParent A');

DOM API

// IE 8+

document.querySelectorAll('#myParent A');

Excluding Elements（排除元素）

选择所有

<div>

元素，排除那些有”ignore”样式类

<div>

元素。

jQuery

$('DIV').not('.ignore');

…或者…

$('DIV:not(.ignore)');

DOM API

// IE 9+

document.querySelectorAll('DIV:not(.ignore)');

Multiple Selectors（多重选择）

选择所有

<div>

,

<a>

和

<script>

元素。

jQuery

$('DIV, A, SCRIPT');

DOM API

// IE 8+

document.querySelectorAll('DIV, A, SCRIPT');

See a Pattern?

如果我们专注于选择器的支持，并且不需要处理IE8以下的浏览器，我们只需用这个替代jQuery：

window.$ = function(selector) {

var selectorType = 'querySelectorAll';

if (selector.indexOf('#') === 0) {

selectorType = 'getElementById';

selector = selector.substr(1, selector.length);

}

return document[selectorType](selector);

};

But I Want More!

对于绝大多数项目中，选择器支持到Web API就足够了。但是，如果你不幸需要支持IE7？在这种情况下，你可能需要一些第三方的代码来提供一些帮助。

当然，你仅仅需要引入jQuery，但当你只需要支持现在先进的选择器时，为什么用这么大的代码库呢？相反，尝试一下micro-library（微小的库）完全专注于元素选择。考虑，Sizzle，这恰好是jQuery使用的选择库。Selectivizr是另一种非常小的选择库，在很老的浏览器上也能支持CSS3选择器。