科技獵jQuery語法對應的DOM API ——選擇元素 – WEB前端開發
- 原作者的寫這文章的意圖是讓我們拋棄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選擇器。
Next
下一篇：操作DOM元素，敬請期待！
本文被轉載1次
首發媒體
| 轉發媒體