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 相关文章推荐
jquery 简单导航实现代码
Sep 11 Javascript
Javascript this 关键字 详解
Oct 22 Javascript
js检测判断日期大于多少天的方法
May 04 Javascript
微信小程序 Page()函数详解
Oct 17 Javascript
Angular JS数据的双向绑定详解及实例
Dec 31 Javascript
Javascript中数组去重与拍平的方法示例
Feb 03 Javascript
Vue实现PopupWindow组件详解
Apr 28 Javascript
uni app仿微信顶部导航条功能
Sep 17 Javascript
vue中使用elementUI组件手动上传图片功能
Dec 13 Javascript
微信小程序 SOTER 生物认证DEMO 指纹识别功能
Dec 13 Javascript
微信小程序实现录制、试听、上传音频功能(带波形图)
Feb 27 Javascript
jQuery列表动态增加和删除的实现方法
Nov 05 jQuery
各浏览器中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中通过ADO调用Access数据库的方法测试不通过
2006/12/31 PHP
浅析SVN常见问题及解决方法
2013/06/21 PHP
PHP Try-catch 语句使用技巧
2016/02/28 PHP
laravel框架邮箱认证实现方法详解
2019/11/22 PHP
JavaScript replace(rgExp,fn)正则替换的用法
2010/03/04 Javascript
jquery $.ajax()取xml数据的小问题解决方法
2010/11/20 Javascript
基于jQuery.Validate验证库知识点的详解
2013/04/26 Javascript
jQuery中Ajax的get、post等方法详解
2015/01/20 Javascript
jQuery实现图片与文字描述左右滑动自动切换的方法
2015/07/27 Javascript
AngularJs基于角色的前端访问控制的实现
2016/11/07 Javascript
详解Node.js:events事件模块
2016/11/24 Javascript
JS中parseInt()和map()用法分析
2016/12/16 Javascript
BootStrapTable 单选及取值的实现方法
2017/01/10 Javascript
详解如何用webpack4从零开始构建react开发环境
2019/01/27 Javascript
手把手教你 CKEDITOR 4 实现Dialog 内嵌 IFrame操作详解
2019/06/18 Javascript
如何在Vue中抽离接口配置文件
2019/10/31 Javascript
vue各种事件监听实例(小结)
2020/06/24 Javascript
js实现详情页放大镜效果
2020/10/28 Javascript
Python 监测文件是否更新的方法
2019/06/10 Python
对pyqt5中QTabWidget的相关操作详解
2019/06/21 Python
python对文件的操作方法汇总
2020/02/28 Python
Python requests模块cookie实例解析
2020/04/14 Python
Keras 使用 Lambda层详解
2020/06/10 Python
python和go语言的区别是什么
2020/07/20 Python
Python+OpenCV图像处理——实现轮廓发现
2020/10/23 Python
浅析CSS3 用text-overflow解决文字排版问题
2020/10/28 HTML / CSS
英国最大的海报商店:GB Posters
2018/03/20 全球购物
全球在线商店:BerryLook
2019/04/14 全球购物
Why do we need Unit test
2013/01/03 面试题
Ajax和javascript的区别
2013/07/20 面试题
自荐信的五个重要部分
2013/10/29 职场文书
数据管理员的自我评价分享
2013/11/15 职场文书
安全生产管理责任书
2014/04/16 职场文书
优秀三好学生事迹材料
2014/08/31 职场文书
致三级跳运动员加油稿
2015/07/21 职场文书
Python中的min及返回最小值索引的操作
2021/05/10 Python