jQuery与原生JavaScript选择HTML元素集合用法对比分析


Posted in jQuery onNovember 26, 2019

本文实例讲述了jQuery与原生JavaScript选择HTML元素集合用法。分享给大家供大家参考,具体如下:

通过调用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>

我们使用原生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()之类的方法,但是将返回的节点拷贝到一个真正的数组里面。因此,查询得到的结果反映的是文档当时的状态:而不会随着文档的变化自动更新。

两种方法各有利弊。例如,下面的代码会导致无限循环,因为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更合适。幸运的是,我们可以在需要时方便地将任何集合传递给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.3water.com/code/HtmlJsRun测试上述代码运行效果。

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

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

jQuery 相关文章推荐
jQuery.ajax向后台传递数组问题的解决方法
May 12 jQuery
jQuery Validate表单验证插件实现代码
Jun 08 jQuery
jquery.uploadView 实现图片预览上传功能
Aug 10 jQuery
一个有意思的鼠标点击文字特效jquery代码
Sep 23 jQuery
jQuery实现的点击按钮改变样式功能示例
Jul 21 jQuery
IE8中jQuery.load()加载页面不显示的原因
Nov 15 jQuery
jQuery事件多次绑定与解绑问题实例分析
Feb 19 jQuery
jQuery实现鼠标移入显示蒙版效果
Jan 11 jQuery
viewer.js一个强大的基于jQuery的图像查看插件(支持旋转、缩放)
Apr 01 jQuery
JQuery插件tablesorter表格排序实现过程解析
May 28 jQuery
jquery实现拖拽添加元素功能
Dec 01 jQuery
高效jQuery选择器的5个技巧实例分析
Nov 26 #jQuery
jquery使用echarts实现有向图可视化功能示例
Nov 25 #jQuery
jQuery Raty星级评分插件使用方法实例分析
Nov 25 #jQuery
jquery 插件重新绑定的处理方法分析
Nov 23 #jQuery
JQuery使用属性addClass、removeClass和toggleClass实现增加和删除类操作示例
Nov 18 #jQuery
Jquery让form表单异步提交代码实现
Nov 14 #jQuery
JQuery发送ajax请求时中文乱码问题解决
Nov 14 #jQuery
You might like
php处理json时中文问题的解决方法
2011/04/12 PHP
PHP5权威编程阅读学习笔记 附电子书下载
2012/07/05 PHP
PHP内部实现打乱字符串顺序函数str_shuffle的方法
2019/02/14 PHP
PhpStorm连接服务器并实现自动上传功能
2020/12/09 PHP
js活用事件触发对象动作
2008/08/10 Javascript
jQuery 使用手册(七)
2009/09/23 Javascript
用Javascript 获取页面元素的位置的代码
2009/09/25 Javascript
Javascript图像处理—亮度对比度应用案例
2013/01/03 Javascript
原生javascript实现获取指定元素下所有后代元素的方法
2014/10/28 Javascript
JQuery实现简单的图片滑动切换特效
2015/11/22 Javascript
JavaScript数据类型学习笔记
2016/01/25 Javascript
JavaScript中清空数组的方法总结
2016/12/02 Javascript
详解利用jsx写vue组件的方法示例
2017/07/17 Javascript
基于Vue2的独立构建与运行时构建的差别(详解)
2017/12/06 Javascript
vue导航栏部分的动态渲染实例
2019/11/01 Javascript
[48:52]DOTA2上海特级锦标赛A组小组赛#2 Secret VS CDEC第一局
2016/02/25 DOTA
利用Python开发微信支付的注意事项
2016/08/19 Python
Python循环语句中else的用法总结
2016/09/11 Python
django 创建过滤器的实例详解
2017/08/14 Python
django如何连接已存在数据的数据库
2018/08/14 Python
python环形单链表的约瑟夫问题详解
2018/09/27 Python
详解Python 爬取13个旅游城市,告诉你五一大家最爱去哪玩?
2019/05/07 Python
Python实现子类调用父类的初始化实例
2020/03/12 Python
Python selenium实现断言3种方法解析
2020/09/08 Python
css3实现信纸/同学录效果的示例代码
2018/12/11 HTML / CSS
Flesh Beauty官网:露华浓集团旗下彩妆品牌
2021/02/15 全球购物
打架检讨书100字
2014/01/08 职场文书
公司企业表扬信
2014/01/11 职场文书
初中高效课堂实施方案
2014/02/26 职场文书
公司门卫工作职责
2014/06/28 职场文书
2014年“四风”问题个人整改措施
2014/09/17 职场文书
导游词之山东红叶谷
2019/10/31 职场文书
《敬重卑微》读后感3篇
2019/11/26 职场文书
Vue的过滤器你真了解吗
2022/02/24 Vue.js
SQL Server删除表中的重复数据
2022/05/25 SQL Server
永中文档在线转换预览基于nginx配置部署方案
2022/06/10 Servers