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 相关文章推荐
Javascript-Mozilla和IE中的一个函数直接量的问题
Jan 09 Javascript
建议大家看下JavaScript重要知识更新
Jul 08 Javascript
js使用函数绑定技术改变事件处理程序的作用域
Dec 26 Javascript
ASP.NET中AJAX 调用实例代码
May 03 Javascript
JavaScript模板入门介绍
Sep 26 Javascript
利用ajaxfileupload插件实现文件上传无刷新的具体方法
Jun 08 Javascript
js仿苹果iwatch外观的计时器代码分享
Aug 26 Javascript
需灵活掌握的Bootstrap预定义排版类 你精通吗?
Jun 20 Javascript
AngularJS入门教程之ng-checked 指令详解
Aug 01 Javascript
Vue 单文件中的数据传递示例
Mar 21 Javascript
React Native之TextInput组件解析示例
Aug 22 Javascript
Vue 莹石摄像头直播视频实例代码
Aug 31 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
php中并发读写文件冲突的解决方案
2013/10/25 PHP
laravel 实现上传图片到本地和前台访问示例
2019/10/21 PHP
js 实现打印网页中定义的部分内容的代码
2010/04/01 Javascript
谈谈关于JavaScript 中的 MVC 模式
2013/04/11 Javascript
使用JS轻松实现ionic调用键盘搜索功能(超实用)
2016/09/06 Javascript
Bootstrap基本插件学习笔记之Tooltip提示工具(18)
2016/12/08 Javascript
jquery判断页面网址是否有效的两种方法
2016/12/11 Javascript
深入理解JS继承和原型链的问题
2016/12/17 Javascript
JS定时检测任务任务完成后执行下一步的解决办法
2016/12/22 Javascript
Vue.js中用webpack合并打包多个组件并实现按需加载
2017/02/17 Javascript
解决BootStrap Fileinput手机图片上传显示旋转问题
2017/06/01 Javascript
QRCode.js:基于JQuery的生成二维码JS库的使用
2017/06/23 jQuery
将angular.js项目整合到.net mvc中的方法详解
2017/06/29 Javascript
Javascript中this关键字指向问题的测试与详解
2017/08/11 Javascript
JavaScript继承定义与用法实践分析
2018/05/28 Javascript
详解KOA2如何手写中间件(装饰器模式)
2018/10/11 Javascript
react 兄弟组件如何调用对方的方法示例
2018/10/23 Javascript
javascript for循环性能测试示例
2019/08/07 Javascript
JQuery事件委托(适用于给动态生成的脚本元素添加事件)
2020/02/01 jQuery
JS数组Reduce方法功能与用法实例详解
2020/04/29 Javascript
修改Vue打包后的默认文件名操作
2020/08/12 Javascript
python生成多个只含0,1元素的随机数组或列表的实例
2018/11/12 Python
聊聊python中的异常嵌套
2020/09/01 Python
pandas将list数据拆分成行或列的实现
2020/12/13 Python
HTML5 Video标签的属性、方法和事件汇总介绍
2015/04/24 HTML / CSS
武汉世纪畅想数字传播有限公司.NET笔试题
2014/07/22 面试题
销售顾问的岗位职责
2013/11/13 职场文书
写自荐信要注意什么
2013/12/26 职场文书
求职信内容怎么写
2014/05/26 职场文书
付款承诺函范文
2015/01/21 职场文书
公司承诺函范文
2015/01/21 职场文书
2016入党积极分子考察评语
2015/12/01 职场文书
2019年消防宣传标语集锦
2019/11/21 职场文书
python playwright 自动等待和断言详解
2021/11/27 Python
MySQL性能指标TPS+QPS+IOPS压测
2022/08/05 MySQL
volatile保证可见性及重排序方法
2022/08/05 Java/Android