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 相关文章推荐
解决IE下select标签innerHTML插入option的BUG(兼容IE,FF,Opera,Chrome,Safari)
May 13 Javascript
Tips 带三角可关闭的文字提示
Oct 06 Javascript
javascript学习笔记(十四) window对象使用介绍
Jun 20 Javascript
JS在TextArea光标位置插入文字并实现移动光标到文字末尾
Jun 21 Javascript
JavaScript创建对象的写法
Aug 29 Javascript
分享jQuery插件的学习笔记
Jan 14 Javascript
火狐和ie下获取javascript 获取event的方法(推荐)
Nov 26 Javascript
详解angular中如何监控dom渲染完毕
Jan 03 Javascript
angularjs 实现带查找筛选功能的select下拉框实例
Jan 11 Javascript
JavaScript之promise_动力节点Java学院整理
Jul 03 Javascript
详解webpack-dev-server使用http-proxy解决跨域问题
Jan 13 Javascript
LayUI数据接口返回实体封装的例子
Sep 12 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 日期时间处理函数小结
2009/12/18 PHP
基于PHP服务端图片生成缩略图的方法详解
2013/06/20 PHP
php+highchats生成动态统计图
2014/05/21 PHP
PHP中使用BigMap实例
2015/03/30 PHP
因str_replace导致的注入问题总结
2019/08/08 PHP
基于php解决json_encode中文UNICODE转码问题
2020/11/10 PHP
jQuery的3种请求方式$.post,$.get,$.getJSON
2014/03/28 Javascript
node.js中的Socket.IO使用实例
2014/11/04 Javascript
jQuery如何封装输入框插件
2016/08/19 Javascript
详解AngularJS通过ocLazyLoad实现动态(懒)加载模块和依赖
2017/03/01 Javascript
JavaScript中document.referrer的用法详解
2017/07/04 Javascript
iscroll实现下拉刷新功能
2017/07/18 Javascript
js学习总结之DOM2兼容处理顺序问题的解决方法
2017/07/27 Javascript
微信小程序引用iconfont图标的方法
2018/10/22 Javascript
从组件封装看Vue的作用域插槽的实现
2019/02/12 Javascript
利用JavaScript的Map提升性能的方法详解
2019/08/14 Javascript
关于layui 下拉列表的change事件详解
2019/09/20 Javascript
js计时事件实现圆形时钟
2020/03/25 Javascript
vue滑动吸顶及锚点定位的示例代码
2020/05/10 Javascript
python中元类用法实例
2014/10/10 Python
python实现2048小游戏
2015/03/30 Python
Python实现二叉搜索树
2016/02/03 Python
Python for Informatics 第11章之正则表达式(四)
2016/04/21 Python
python使用正则筛选信用卡
2019/01/27 Python
python动态视频下载器的实现方法
2019/09/16 Python
python实现高斯判别分析算法的例子
2019/12/09 Python
如何在django中运行scrapy框架
2020/04/22 Python
递归计算如下递归函数的值(斐波拉契)
2012/02/04 面试题
护士演讲稿范文
2014/01/05 职场文书
个人实习生的自我评价
2014/02/16 职场文书
企业党员公开承诺书
2014/03/26 职场文书
博士毕业生自我鉴定范文
2014/04/13 职场文书
单位租车协议书
2015/01/29 职场文书
党员考试作弊检讨书1000字
2015/02/16 职场文书
全面盘点MySQL中的那些重要日志文件
2021/11/27 MySQL
配置Kubernetes外网访问集群
2022/03/31 Servers