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 textarea光标定位方法(兼容IE和FF)
Mar 12 Javascript
JS截取字符串常用方法详细整理
Oct 28 Javascript
js形成页面的一种遮罩效果实例代码
Jan 04 Javascript
JavaSript中变量的作用域闭包的深入理解
May 12 Javascript
Bootstrap网格系统详解
Apr 26 Javascript
jQuery图片前后对比插件beforeAfter用法示例【附demo源码下载】
Sep 20 Javascript
微信小程序 解决swiper不显示图片的方法
Jan 04 Javascript
集合Bootstrap自定义confirm提示效果
Sep 19 Javascript
vue异步加载高德地图的实现
Jun 19 Javascript
vue下使用nginx刷新页面404的问题解决
Aug 02 Javascript
原生js实现随机点名功能
Nov 05 Javascript
JS实现简单移动端鼠标拖拽
Jul 23 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的魔术方法__get()和__set()使用介绍
2012/09/19 PHP
叫你如何修改Nginx与PHP的文件上传大小限制
2014/09/10 PHP
利用“多说”制作留言板、评论系统
2015/07/14 PHP
PHP Socket网络操作类定义与用法示例
2017/08/30 PHP
ThinkPHP框架整合微信支付之Native 扫码支付模式一图文详解
2019/04/09 PHP
JavaScript 代码压缩工具小结
2012/02/27 Javascript
JavaScript动态修改背景颜色的方法
2015/04/16 Javascript
js输出数据精确到小数点后n位代码
2016/07/02 Javascript
Bootstrap中点击按钮后变灰并显示加载中实例代码
2016/09/23 Javascript
jQuery实现优雅的弹窗效果(6)
2017/02/08 Javascript
详解Windows下安装Nodejs步骤
2017/05/18 NodeJs
Bootstrap导航菜单点击后无法自动添加active的处理方法
2018/08/10 Javascript
vuex2中使用mapGetters/mapActions报错的解决方法
2018/10/20 Javascript
微信小程序登录态和检验注册过没的app.js写法
2019/05/22 Javascript
js实现轮播图效果 z-index实现轮播图
2020/01/17 Javascript
[04:52]第二届DOTA2亚洲邀请赛主赛事第一天比赛集锦:OG娜迦海妖放大配合谜团大中3人
2017/04/02 DOTA
[47:52]完美世界DOTA2联赛PWL S2 PXG vs InkIce 第二场 11.26
2020/11/30 DOTA
SublimeText 2编译python出错的解决方法(The system cannot find the file specified)
2013/11/27 Python
python实现2048小游戏
2015/03/30 Python
Python切片工具pillow用法示例
2018/03/30 Python
使用Python实现企业微信的自动打卡功能
2019/04/30 Python
在Python中预先初始化列表内容和长度的实现
2019/11/28 Python
python中matplotlib实现随鼠标滑动自动标注代码
2020/04/23 Python
Python异常处理机制结构实例解析
2020/07/23 Python
python用tkinter实现一个gui的翻译工具
2020/10/26 Python
Python高阶函数与装饰器函数的深入讲解
2020/11/10 Python
卡塔尔航空官方网站:Qatar Airways
2017/02/08 全球购物
JACK & JONES英国官方网站:欧洲领先的男装生产商
2017/09/27 全球购物
美国最大最全的亚洲购物网站:美国亚米网(Yamibuy)
2020/05/05 全球购物
中专自我鉴定范文
2013/10/16 职场文书
幼儿园长自我鉴定
2013/10/17 职场文书
我是一名护士演讲稿
2014/08/28 职场文书
完整版商业计划书
2014/09/15 职场文书
2015民办小学年度工作总结
2015/05/26 职场文书
2015年信息化建设工作总结
2015/07/23 职场文书
适合毕业生创业的项目怎么找?
2019/08/08 职场文书