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插件FusionCharts绘制2D柱状图和折线图的组合图效果示例【附demo源码】
Apr 10 jQuery
jquery实现提示语淡入效果
May 05 jQuery
jQuery插件开发发送短信倒计时功能代码
May 09 jQuery
基于jQuery封装的分页组件
Jun 26 jQuery
JQuery 获取多个select标签option的text内容(实例)
Sep 07 jQuery
JS与jQuery实现ListBox上移,下移,左移,右移操作功能示例
May 31 jQuery
jQuery实现购物车的总价计算和总价传值功能
Nov 28 jQuery
JS秒杀倒计时功能完整实例【使用jQuery3.1.1】
Sep 03 jQuery
jQuery鼠标滑过横向时间轴样式(代码详解)
Nov 01 jQuery
jQuery实现简单聊天室
Feb 08 jQuery
Jquery+AJAX实现无刷新上传并重命名文件操作示例【PHP后台接收】
May 29 jQuery
jquery插件实现图片悬浮
Apr 16 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内核解析:PHP中的哈希表
2014/01/30 PHP
php备份数据库类分享
2015/04/14 PHP
Centos7安装swoole扩展操作示例
2020/03/26 PHP
IE autocomplete internet explorer's autocomplete
2007/06/30 Javascript
setTimeout 不断吐食CPU的问题分析
2009/04/01 Javascript
为你的网站增加亮点的9款jQuery插件推荐
2011/05/03 Javascript
深入理解JavaScript作用域和作用域链
2011/10/21 Javascript
JS在textarea光标处插入文本的小例子
2013/03/22 Javascript
js实现获取当前时间是本月第几周的方法
2015/08/11 Javascript
浅析Nodejs npm常用命令
2016/06/14 NodeJs
深入理解bootstrap框架之第二章整体架构
2016/10/09 Javascript
vue.js+Element实现表格里的增删改查
2017/01/18 Javascript
JS优化与惰性载入函数实例分析
2017/04/06 Javascript
JS使用遮罩实现点击某区域以外时弹窗的弹出与关闭功能示例
2018/07/31 Javascript
Js图片点击切换轮播实现代码
2020/07/27 Javascript
用python读写excel的方法
2014/11/18 Python
Python中装饰器的一个妙用
2015/02/08 Python
对Python中数组的几种使用方法总结
2018/06/28 Python
python使用递归的方式建立二叉树
2019/07/03 Python
对django2.0 关联表的必填on_delete参数的含义解析
2019/08/09 Python
Django User 模块之 AbstractUser 扩展详解
2020/03/11 Python
python数据分析工具之 matplotlib详解
2020/04/09 Python
python selenium xpath定位操作
2020/09/01 Python
Python中的特殊方法以及应用详解
2020/09/20 Python
6种非常炫酷的CSS3按钮边框动画特效
2016/03/16 HTML / CSS
html5 Canvas画图教程(9)—canvas中画出矩形和圆形
2013/01/09 HTML / CSS
突袭HTML5之Javascript API扩展2—地理信息服务及地理位置API学习
2013/01/31 HTML / CSS
德国大型的家具商店:Pharao24.de
2016/10/02 全球购物
澳洲的服装老品牌:SABA
2018/02/06 全球购物
办公室保洁员岗位职责
2013/12/02 职场文书
技校生自我鉴定
2013/12/08 职场文书
直接有效的自我评价
2014/01/11 职场文书
英语商务邀请函范文
2014/01/16 职场文书
公司年底活动方案
2014/08/17 职场文书
先进教师个人总结
2015/02/11 职场文书
隐形的翅膀观后感
2015/06/10 职场文书