jQuery 1.7.2中getAll方法的疑惑分析


Posted in Javascript onMay 23, 2012

getAll方法是私有的,在manipulation模块中。代码只有简单的几行,如下

function getAll( elem ) { 
if ( typeof elem.getElementsByTagName !== "undefined" ) { 
return elem.getElementsByTagName( "*" ); 
} else if ( typeof elem.querySelectorAll !== "undefined" ) { 
return elem.querySelectorAll( "*" ); 
} else { 
return []; 
} 
}

从函数名可知该方法用来获取传入HTML元素的所有子元素。内部就三个分支

1,先判断elem是否有getElementsByTagName方法,如有使用getElementsByTagName方法获取所有子元素后返回。
2,不支持getElementsByTagName接着判断elem是否支持querySelectorAll方法,如支持使用querySelectorAll方法获取元素子元素后返回。
3,getElementsByTagName和querySelectorAll都不支持,返回空数组。

当时看这段代码时有的疑惑,感觉第二个分支有点多余。

1,getElementsByTagName 是DOM Level 2 中的API(较早),目前的所有浏览器应该都已经支持,既然都支持了,那么就不会进入第二个分支而直接返回了。后面代码岂不是都是多余了。
2,querySelectorAll 是DOM Level 3 中的API(较新),IE6/7不支持。

看到这里大家是不是也觉得后面两个分支是多余的呢? 或者说能找出不多余的理由吗? 即只要找出符合以下条件的元素elem。
“elem没有getElementsByTagName方法,但有querySelectorAll方法”
经过多方寻求,讨论终于找到了答案(小牛同学发现的)。DocumentFragment满足该条件。

var frag = document.createDocumentFragment(); 
alert('getElementsByTagName' in frag); 
alert('querySelectorAll' in frag);

以上代码在IE9/Chrome/Safari/Firefox/Opera中先后弹出了false,true。

到此,不解释了。

注:DocumentFragment对象的几个特殊点
1,IE6/7/8中具有createElement方法,其它浏览器(IE9/10/Safari/Chrome/Firefox/Opera)没有
2,IE9/10/Firefox/Safari/Chrome/Opera中没有getElementsByTagName方法,但有querySelectorAll方法。
相关:
https://3water.com/article/30352.htm
https://developer.mozilla.org/en/DOM/document.createDocumentFragment
https://developer.mozilla.org/En/DOM/DocumentFragment
http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-B63ED1A3

Javascript 相关文章推荐
js定时调用方法成功后并停止调用示例
Apr 08 Javascript
JavaScript计算器网页版实现代码分享
Jul 15 Javascript
Node.js如何自动审核团队的代码
Jul 20 Javascript
jQuery Easyui快速入门教程
Aug 21 Javascript
快速解决js中window.location.href不工作的问题
Nov 02 Javascript
性能优化之代码优化页面加载速度
Mar 01 Javascript
js实现简单的获取验证码按钮效果
Mar 03 Javascript
详解在Vue中如何使用axios跨域访问数据
Jul 07 Javascript
Vue.js实现输入框绑定的实例代码
Aug 24 Javascript
Angular实现模版驱动表单的自定义校验功能(密码确认为例)
May 17 Javascript
基于Webpack4和React hooks搭建项目的方法
Feb 05 Javascript
微信小程序实现选项卡滑动切换
Oct 22 Javascript
各浏览器中querySelector和querySelectorAll的实现差异分析
May 23 #Javascript
jQuery-onload让第一次页面加载时图片是淡入方式显示
May 23 #Javascript
jquery.pagination.js 无刷新分页实现步骤分享
May 23 #Javascript
jquery.Jwin.js 基于jquery的弹出层插件代码
May 23 #Javascript
使用JQuery和CSS模拟超链接的用户单击事件的实现代码
May 23 #Javascript
基于jquery tab切换(防止页面刷新)
May 23 #Javascript
jQuery下通过replace字符串替换实现大小图片切换
May 22 #Javascript
You might like
浅析Yii中使用RBAC的完全指南(用户角色权限控制)
2013/06/20 PHP
详解WordPress中添加友情链接的方法
2016/05/21 PHP
PHP多进程编程实例详解
2017/07/19 PHP
JS脚本defer的作用示例介绍
2014/01/02 Javascript
FF(火狐)浏览器无法执行window.close()解决方案
2014/11/13 Javascript
jQuery中has()方法用法实例
2015/01/06 Javascript
jquery中one()方法的用法实例
2015/01/16 Javascript
详解Bootstrap的aria-label和aria-labelledby应用
2016/01/04 Javascript
jQuery购物车插件jsorder用法(支持后台处理程序直接转换成DataTable处理)
2016/06/08 Javascript
JS实现物体带缓冲的间歇运动效果示例
2016/12/22 Javascript
JavaScript实现256色转灰度图
2017/02/22 Javascript
JavaScript Uploadify文件上传实例
2017/02/28 Javascript
微信小程序 slider的简单实例
2017/04/19 Javascript
基于vue2.0实现的级联选择器
2017/06/09 Javascript
jquery拖拽自动排序插件使用方法详解
2020/07/20 jQuery
npm qs模块使用详解
2020/02/07 Javascript
[00:27]DOTA2次级职业联赛 - Lilith战队宣传片
2014/12/01 DOTA
Python线程的两种编程方式
2015/04/14 Python
在Gnumeric下使用Python脚本操作表格的教程
2015/04/14 Python
python实现中文转换url编码的方法
2016/06/14 Python
python实现装饰器、描述符
2018/02/28 Python
python计算日期之间的放假日期
2018/06/05 Python
Python中dict和set的用法讲解
2019/03/28 Python
python线程信号量semaphore使用解析
2019/11/30 Python
解决python打开https出现certificate verify failed的问题
2020/09/03 Python
一款利用html5和css3实现的3D立方体旋转效果教程
2016/04/26 HTML / CSS
Java基础知识面试要点
2016/07/29 面试题
本科生个人求职自荐信
2013/09/26 职场文书
高三体育教学反思
2014/01/29 职场文书
应届生自荐信范文
2014/02/21 职场文书
劳动工资科岗位职责范本
2014/03/02 职场文书
领导接待方案
2014/03/13 职场文书
总经理工作职责范文
2014/03/14 职场文书
《卖木雕的少年》教学反思
2014/04/11 职场文书
2014年业务工作总结
2014/11/17 职场文书
民主评议党员个人总结
2015/02/13 职场文书