科技獵jQuery語(yǔ)法對(duì)應(yīng)的DOM API ——選擇元素 – WEB前端開發(fā)
- 原作者的寫這文章的意圖是讓我們拋棄jQuery,You Don’t Need jQuery!提倡我們使用原生的JavaScript，所以收集整理了jQuery語(yǔ)法對(duì)應(yīng)的DOM API ；
- 原作者參數(shù)的原因可以看這里： http://blog.garstasio.com/you-dont-need-jquery/why-not/ ?，個(gè)人同意他的觀點(diǎn)，簡(jiǎn)單的頁(yè)面或應(yīng)用，完全可以拋棄jQuery；但是出于開發(fā)效率和開發(fā)成本的考慮，我還是比較喜歡用jQuery。
- 本人翻譯或者說(shuō)拷貝這篇文章的原因是：有一部分前端只會(huì)用jQuery，什么都網(wǎng)上找插件，甚至濫用jQuery，一點(diǎn)原生的JavaScript都不會(huì)寫。QQ上，微博私信經(jīng)常收到類似的基礎(chǔ)問題。前端就是折騰的活，要從基礎(chǔ)系統(tǒng)的學(xué)習(xí)。所以翻譯了這篇文章，希望對(duì)新手和不寫原生腳本的同學(xué)有一點(diǎn)點(diǎn)的幫助。
選擇元素
有多少次你看到一個(gè)Web應(yīng)用程序或庫(kù)使用jQuery執(zhí)行簡(jiǎn)單瑣碎的元素選擇？有多少次
你
這樣寫:
$(#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');
這兩種方法返回一個(gè)
Element
（元素）。 需要注意的是
使用
getElementById
比使用
querySelector
更高效
。
請(qǐng)問jQuery的語(yǔ)法提供任何好處嗎？我沒有看到一個(gè)。你呢？
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');
第一個(gè)方法返回的
HTMLCollection
，并且
效率最高的是第二個(gè)方法
。
querySelectorAll
總是返回一個(gè)
NodeList
（節(jié)點(diǎn)列表）
。
同樣，這里真的很簡(jiǎn)單的東西。為什么要使用jQuery？
By Tag Name
舉個(gè)例子，選擇頁(yè)面上所有的
<div>
元素：
jQuery
$('div');
DOM API
// IE 5.5+
document.getElementsByTagName('div');
…或者…
// IE 8+
document.querySelectorAll('div');
正如預(yù)期的那樣，
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語(yǔ)法非常相似。
By Pseudo-class（偽類）
選擇所有在指定表單中的當(dāng)前無(wú)效（:invalid 偽類）字段。假設(shè)我們的表單 ID為”myForm”。
jQuery
$('#myForm :invalid');
DOM API
// IE 8+
document.querySelectorAll('#myForm :invalid');
Children（子元素）
選擇一個(gè)特定元素的所有子元素。?假設(shè)我們的特定元素 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以下的瀏覽器，我們只需用這個(gè)替代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!
對(duì)于絕大多數(shù) 項(xiàng)目中，選擇器支持到Web API就足夠了。但是，如果你不幸需要支持IE7？在這種情況下，你可能需要一些第三方的代碼來(lái)提供一些幫助。
當(dāng)然，你僅僅需要引入jQuery，但當(dāng)你只需要支持現(xiàn)在先進(jìn)的選擇器時(shí)，為什么用這么大的代碼庫(kù)呢？相反，嘗試一下micro-library（微小的庫(kù)）完全專注于元素選擇。考慮， Sizzle ，這恰好是jQuery使用的選擇庫(kù)。 Selectivizr 是另一種非常小的選擇庫(kù)，在很老的瀏覽器上也能支持CSS3選擇器。
Next
下一篇：操作DOM元素，敬請(qǐng)期待！
本文被轉(zhuǎn)載1次
首發(fā)媒體
| 轉(zhuǎn)發(fā)媒體