抛弃jQuery：DOM API之选择元素

原文链接：http://blog.garstasio.com/you-dont-need-jquery/selectors/

我的Blog：http://cabbit.me/you-dont-need-jquery/selector/

上一篇文章抛弃jQuery：Why?引起了很多朋友的讨论，在这里我想强调，这一系列文章从来不希望开发人员不分情况的丢弃jQuery，也绝对不会抵制使用JavaScript库，手工处理兼容性问题，这篇及后面的专题都提供了一些能够替代jQuery的库。

如果我说“抛弃jQuery吧”，就有人觉得等于“抛弃所有的库，用C和汇编来写代码”，那我想我们更应该思考一下，我们是不是真的把jQuery当成了JavaScript的全部？

jQuery的选择符模块无比优雅，以至于我见过很多Web框架和应用中引用了庞大的jQuery，只是因为它提供了方便的DOM元素选择函数。我已经数不清自己写过多少次 $(#myElement) 或者 $('.myElement') 了，以至于在没有jQuery时经常束手无策。事实上使用DOM API选择元素并没有那么难，它或许没有jQuery的那么简短，不过用起来也足够简单了。

• ID
• CSS Classes
• HTML标签名
• HTML属性
• 伪类
• 子元素
• 后代元素
• 排除元素
• 多重选择
• 仿造jQuery的“$”
• 专用的选择符模块

ID

jQuery

// 返回一个jQuery对象
$('#myElement');


DOM API，我们最常见到的是这样：

// IE 5.5+
document.getElementById('myElement');


IE 8及以上版本的浏览器中可以使用querySelector函数：

// IE 8+
document.querySelector('#myElement');


这两种DOM API函数都直接返回一个元素，有测试表明getElementById函数比querySelector函数效率更高一些。

随着浏览器升级，对querySelector函数的支持越来越好，jQuery的选择函数还有什么决定性的优势么？

CSS Classes

jQuery

// 返回所有匹配元素的jQuery对象
$('.myElement');


DOM API，IE 9及以上版本的浏览器中有专用的getElementsByClassName函数：

// IE 9+
document.getElementsByClassName('myElement');


IE 8及以上版本的浏览器中可以使用querySelectorAll函数：

// IE 8+
document.querySelectorAll('.myElement');


两种DOM API中getElementsByClassName的效率最高，返回一个HTMLCollection集合。后一种（querySelectorAll）返回NodeList类型。

jQuery能做到的，DOM API同样也做到了，不是么？

HTML 标签名

假设我们要选择所有的 div 元素：

jQuery

$('div');


DOM API，最常见的函数是这个：

// IE 5.5+
document.getElementsByTagName('div');


IE 8及以上版本的浏览器中依然可以使用querySelectorAll函数：

// IE 8+
document.querySelectorAll('div');


两种DOM API相比，getElementsByTagName的效率会稍微高一些。

HTML 属性

假设我们要选择 data-foo-bar 属性为 someval 的元素：

jQuery

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


DOM API，IE 8及以上版本的浏览器中可以继续使用万能的querySelectorAll函数：

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


伪类

假设我们要从 id=myForm 的 from 元素中选择具备 :invalid 伪类的元素：

jQuery

$('#myForm :invalid');


DOM API，IE 8及以上版本的浏览器中可以继续使用万能的querySelectorAll函数：

// IE 8+
document.querySelectorAll('#myForm :invalid');


子元素

假设父元素 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及以上版本的浏览器中可以直接使用children来获取：

// IE 9+
// NOTE: This ignores comment & text nodes.
document.getElementById('myParent').children;


如果只是想获取包含 ng-click 属性的直接子元素呢？

jQuery

$('#myParent').children('[ng-click]');
// 或者
$('#myParent > [ng-click]');


DOM API，我是从这时开始发现querySelector比我想象的要强大…

// IE 8+
document.querySelector('#myParent > [ng-click]');


后代元素

假设祖先节点 id="myParent"，我们希望获取其后代的所有超链接：

jQuery

$('#myParent A');


DOM API，IE 8及以上版本的浏览器里可以这样：

// IE 8+
document.querySelectorAll('#myParent A');


排除元素

假设我们要从 div 元素中获取出不带“ignore” class的元素

jQuery

$('DIV').not('.ignore');
// 或者
$('DIV:not(.ignore)');


DOM API，IE 8及以上版本的浏览器中可以这样：

// IE 9+
document.querySelectorAll('DIV:not(.ignore)');


多重选择

假设我们要选择所有的 div , a 和 script 元素：

jQuery

$('DIV, A, SCRIPT');


DOM API，IE 8及以上版本的浏览器里可以这样：

// IE 8+
document.querySelectorAll('DIV, A, SCRIPT');


仿造 jQuery 的 “$”

发现什么规律了么？

如果我们只考虑IE8及以上的浏览器，我们可以通过简单的代码“仿造”出类似jQuery中“$”选择符的效果：

window.$ = function(selector) {
var selectorType = 'querySelectorAll'; if (selector.indexOf('#') === 0) {
selectorType = 'getElementById';
selector = selector.substr(1, selector.length);
} return document[selectorType](selector);
};


这段代码之后，你就可以在脚本中使用$来进行大部分选择元素的操作了。

可以替代 jQuery 的专用选择符模块

对于大部分JavaScript项目来说，原生的浏览器API已经足够进行DOM元素的选择了，但是我们也注意到，这些函数在低版本的IE浏览器中不能很好的工作。为了兼容低版本的浏览器，我们需要引入一些第三方的模块来帮助我们完成选择元素的任务。

当然直接引入jQuery是最直接的方法，但是我们如果我们只是为了享受选择元素的便利，那jQuery显然大材小用（浪费带宽）了。我们不妨试试Sizzle，这是一个很小的模块，专注于选择DOM元素，事实上jQuery正是使用了Sizzle作为它的一部分。Selectivizr是另一个选择，同样很小，专注于在较早版本的浏览器中支持CSS3选择符，他同样被包含在jQuery, prototype, mootools等框架中。

如果我漏掉了什么重要的选择符，请在评论里告诉我。

题图来自：https://www.safaribooksonline.com/library/view/head-first-jquery/9781449311988/ch04.html