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 28 Javascript
JQuery DataTable删除行后的页面更新利用Ajax解决
May 17 Javascript
javascript新建标签,判断键盘输入,以及判断焦点(示例代码)
Nov 25 Javascript
jquery查找父元素、子元素(个人经验总结)
Apr 09 Javascript
JS加载器如何动态加载外部js文件
May 26 Javascript
bootstrap轮播图示例代码分享
May 17 Javascript
Vue与Node.js通过socket.io通信的示例代码
Jul 25 Javascript
Vue项目安装插件并保存
Jan 28 Javascript
微信小程序实现购物车代码实例详解
Aug 29 Javascript
vue 组件开发原理与实现方法详解
Nov 29 Javascript
vue+Element-ui实现分页效果
Nov 15 Javascript
小程序自定义弹框效果
Nov 16 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 5昨天隆重推出--PHP 5/Zend Engine 2.0新特性
2006/10/09 PHP
谈谈新手如何学习PHP
2006/12/23 PHP
PHP中魔术变量__METHOD__与__FUNCTION__的区别
2014/09/29 PHP
php简单中奖算法(实例)
2017/08/15 PHP
checkbox全选/取消全选以及checkbox遍历jQuery实现代码
2009/12/02 Javascript
js window.print实现打印特定控件或内容
2013/09/16 Javascript
JS,Jquery获取select,dropdownlist,checkbox下拉列表框的值(示例代码)
2014/01/11 Javascript
网页运行时提示对象不支持abigimage属性或方法
2014/08/10 Javascript
js使用post 方式打开新窗口
2015/02/26 Javascript
谈谈Jquery中的children find 的区别有哪些
2015/10/19 Javascript
JS常用正则表达式总结【经典】
2017/05/12 Javascript
layui分页效果实现代码
2017/05/19 Javascript
原生JS实现图片网格式渐显、渐隐效果
2017/06/05 Javascript
vue iView 上传组件之手动上传功能
2018/03/16 Javascript
layui框架table 数据表格的方法级渲染详解
2018/08/19 Javascript
JavaScript前端页面搜索功能案例【基于jQuery】
2019/07/10 jQuery
[59:48]LGD vs IG 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Python使用MySQLdb for Python操作数据库教程
2014/10/11 Python
python使用正则表达式分析网页中的图片并进行替换的方法
2015/03/26 Python
30分钟搭建Python的Flask框架并在上面编写第一个应用
2015/03/30 Python
深入解析Python中的urllib2模块
2015/11/13 Python
Python基于回溯法子集树模板解决最佳作业调度问题示例
2017/09/08 Python
Python面向对象编程之继承与多态详解
2018/01/16 Python
selenium+python自动化测试之使用webdriver操作浏览器的方法
2019/01/23 Python
钉钉群自定义机器人消息Python封装的实例
2019/02/20 Python
python开发游戏的前期准备
2019/05/05 Python
Python依赖包整体迁移方法详解
2019/08/15 Python
django项目登录中使用图片验证码的实现方法
2019/08/15 Python
python 多进程共享全局变量之Manager()详解
2019/08/15 Python
python如何实现递归转非递归
2021/02/25 Python
高中毕业生自我鉴定范文
2013/09/26 职场文书
公司司机岗位职责
2014/02/07 职场文书
建筑专业毕业生求职信
2014/09/30 职场文书
幸福终点站观后感
2015/06/04 职场文书
员工保密协议范本,您一定得收藏!很有用!
2019/08/08 职场文书
JavaScript流程控制(分支)
2021/12/06 Javascript