jQuery与原生JavaScript获取HTML元素集合的区别：实时与静态对比

本文通过具体实例，详细解析jQuery与原生JavaScript在选取HTML元素集合时的用法差异，供读者参考学习。

HTMLCollection与数组的区别

调用document.getElementsByTagName、document.getElementsByName以及document.getElementsByClassName（部分浏览器可能不支持）可返回HTMLCollection对象。从外观上看，它们与数组相似，均具备length属性，且支持通过[index]索引访问元素。但实际上，它们并非真正的数组，因此不支持push()、slice()或sort()等数组方法。

假设存在如下HTML文档结构：

<body>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
  <p>Paragraph 3</p>
</body>

jQuery与原生JS获取元素对比

我们分别使用原生JavaScript的getElementsByTagName方法与jQuery选择器来获取所有的paragraph节点：

var pCollection = document.getElementsByTagName("p");
var pQuery = $("p");
console.log("pCollection.length: ", pCollection.length);
console.log("pQuery.length: ", pQuery.length);

由于获取的是相同的节点集合，两者的长度均为3：

pCollection.length: 3 pQuery.length: 3

接下来，我们在文档中动态添加一个新的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);

运行结果如下：

pCollection.length: 4 pQuery.length: 3

实时集合与静态快照的差异

HTMLCollection对象是实时的（live）。当文档结构发生变动时，集合会自动更新以反映最新状态。相比之下，jQuery及其他JavaScript库虽然内部也调用了如document.getElementsByTagName()之类的方法，但它们会将返回的节点拷贝到一个真正的数组中。因此，jQuery查询结果反映的是文档在查询那一刻的状态，不会随后续文档变化而自动更新。

这两种方法各有优劣。例如，若执行以下代码，将导致无限循环，因为HTMLCollection的长度会在每次循环中添加<p>元素后自动增加1：

var pCollection = document.getElementsByTagName("p");
for (var i = 0; i < pCollection.length; i++) {
  document.body.appendChild(pCollection[i].cloneNode(true));
}

适用场景与混合使用建议

在某些场景下，相较于静态的jQuery节点集合或重复调用选择器，使用速度更快且为原生的实时HTMLCollection更为合适。幸运的是，我们可以方便地将任何HTMLCollection传递给jQuery进行处理，例如：

var pCollection = document.getElementsByTagName("p");
// ... add nodes, do work, etc ...
$(pCollection).addClass("myclass");

虽然jQuery及其他库能显著减少开发工作量，但在条件允许的情况下，优先使用原生（plain old）JavaScript可以避免额外的文件请求与处理开销，从而编写出更高效的代码。

原文链接：http://www.sitepoint.com/javascript-vs-jquery-html-collections/

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容可查看本站专题：《JavaScript操作DOM技巧总结》、《JavaScript页面元素操作技巧总结》、《JavaScript事件相关操作与技巧大全》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript错误与调试技巧总结》

希望本文所述对大家JavaScript程序设计有所帮助。