jQuery與原生JavaScript選擇HTML元素集合用法對比分析
本文實例講述了jQuery與原生JavaScript選擇HTML元素集合用法。分享給大家供大家參考，具體如下：
通過調(diào)用document.getElementsByTagName, document.getElementsByName以及document.getElementsByClassName（部分瀏覽器不支持），可以返回HTMLCollection對象。表面上，它們與數(shù)組很類似，因為它們都包含length屬性并且元素都可以通過[index]方式訪問。然而，實際上它們并不是數(shù)組；諸如push(), slice()與sort()之類的方法不受支持。
考慮下面的HTML文檔：
<body> <p>Paragraph 1</p> <p>Paragraph 2</p> <p>Paragraph 3</p> </body>
我們使用原生JavaScript的getElementsByTagName方法與jQuery選擇器分別獲取每一個paragraph節(jié)點：
var pCollection = document.getElementsByTagName("p");
var pQuery = $("p");
console.log("pCollection.length: ", pCollection.length);
console.log("pQuery.length: ", pQuery.length);
它們都返回了相同的節(jié)點，因此集合長度都是3：
pCollection.length: 3
pQuery.length: 3
我們現(xiàn)在再向文檔中添加一個paragraph元素，然后再觀察一下集合：
// add new paragraph
var newp = document.createElement("p");
newp.appendChild(document.createTextNode("Paragraph 4"));
document.body.appendChild(newp);
//
// display length
console.log("pCollection.length: ", pCollection.length);
console.log("pQuery.length: ", pQuery.length);
運行結(jié)果：
pCollection.length: 4
pQuery.length: 3
HTMLCollection對象是實時的（live）。它們會在相應文檔發(fā)生變化時自動更新。jQuery與其他JavaScript庫也使用了諸如document.getElementsByTagName()之類的方法，但是將返回的節(jié)點拷貝到一個真正的數(shù)組里面。因此，查詢得到的結(jié)果反映的是文檔當時的狀態(tài)：而不會隨著文檔的變化自動更新。
兩種方法各有利弊。例如，下面的代碼會導致無限循環(huán)，因為HTMLCollection的長度會在<p>元素增加時自動+1：
var pCollection = document.getElementsByTagName("p");
for (var i = 0; i < pCollection.length; i++) {
document.body.appendChild(pCollection[i].cloneNode(true));
}
有時候，相較于靜態(tài)的jQuery節(jié)點集合或者重復調(diào)用選擇器，使用速度更快、原生的實時HTMLCollection更合適。幸運的是，我們可以在需要時方便地將任何集合傳遞給jQuery，例如：
var pCollection = document.getElementsByTagName("p");
// ... add nodes, do work, etc ...
$(pCollection).addClass("myclass");
jQuery與其他庫可以減少開發(fā)工作量，但是，在可能的情況下，使用原生（plain old）JavaScript，可以避免額外的文件請求與處理開銷，從而寫出更加高效的代碼。
原文鏈接：http://www.sitepoint.com/javascript-vs-jquery-html-collections/
感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運行工具：http://tools.jb51.net/code/HtmlJsRun測試上述代碼運行效果。
更多關(guān)于JavaScript相關(guān)內(nèi)容可查看本站專題：《JavaScript操作DOM技巧總結(jié)》、《JavaScript頁面元素操作技巧總結(jié)》、《JavaScript事件相關(guān)操作與技巧大全》、《JavaScript查找算法技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript錯誤與調(diào)試技巧總結(jié)》
希望本文所述對大家JavaScript程序設計有所幫助。
- javascript與jquery動態(tài)創(chuàng)建html元素示例
- js jquery獲取當前元素的兄弟級 上一個 下一個元素
- js與jquery獲取父元素,刪除子元素的兩種不同方法
- JavaScript和jquery獲取父級元素、子級元素、兄弟元素的方法
- js與jquery獲取父級元素,子級元素,兄弟元素的實現(xiàn)方法
- jQuery下實現(xiàn)等待指定元素加載完畢(可改成純js版)
- js jquery 獲取某一元素到瀏覽器頂端的距離實現(xiàn)方法
- JS加jquery簡單實現(xiàn)標簽元素的顯示或隱藏
- JS Jquery 遍歷,篩選頁面元素 自動完成(實現(xiàn)代碼)
- jquery和javascript中如何將一元素的內(nèi)容賦給另一元素
- jQuery與javascript對照學習 獲取父子前后元素 實現(xiàn)代碼
- jQuery和JavaScript節(jié)點插入元素的方法對比
相關(guān)文章
這幾天在做一個文件管理的模塊，里面有排序的功能，產(chǎn)品經(jīng)理看了說希望能做出更加智能的文件排序功能，就像是win7的名稱排序一樣，主要就是文件名中的數(shù)字會按大小排序，而不是直接按ascii碼 ,這兩天晚上沒事，就先寫了這個排序方法，下個版本中就可以用上了2010-08-08
JavaScript DOM元素常見操作詳解【添加、刪除、修改等】
這篇文章主要介紹了JavaScript DOM元素常見操作,包括針對dom元素的添加、刪除、修改等相關(guān)操作實現(xiàn)技巧與注意事項,需要的朋友可以參考下2018-05-05
本文主要介紹了javascript深拷貝和淺拷貝的相關(guān)知識。具有很好的參考價值，下面跟著小編一起來看下吧2017-02-02
在JavaScript中，等號由雙等號(==)表示，當且僅當兩個運算數(shù)相等時，它返回true。今天我們就來詳細探討下等號運算符的問題，并附上等號運算符和全等號運算符的區(qū)別分析。2015-04-04
動態(tài)控制Table的js代碼...2007-03-03
這篇文章主要給大家介紹了關(guān)于ES6中Object.assign方法使用的相關(guān)資料,Object.assign可以用來處理數(shù)組,但是會把數(shù)組視為對象,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-06-06
大家在寫div+css的時候經(jīng)常會用到彈出層，由于IE6的bug，所以當使用多個標簽重復寫彈出層的時候會遇到后面的層壓在了彈出層的上面;用Jquery給彈出層的z軸依次增加高度可解決.代碼很簡單，效果很顯著,需要了解的朋友可以參考下2012-12-12
這篇文章主要介紹了JavaScript柯里化函數(shù)式編程，JS柯里化是前端面試中最常見的問題之一，它可以讓你的代碼更簡潔，工作更高效，感興趣想要詳細了解可以參考下文2023-05-05
這篇文章主要為大家詳細介紹了js實現(xiàn)登錄彈框，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-08-08
javascript 程序庫的比較（一）之DOM功能2010-04-04