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 相关文章推荐
AlertBox 弹出层信息提示框效果实现步骤
Oct 11 Javascript
javascript高级学习笔记整理
Aug 14 Javascript
jQuery版仿Path菜单效果
Dec 15 Javascript
jquery 新建的元素事件绑定问题解决方案
Jun 12 Javascript
JS实现为表格动态添加标题的方法
Mar 31 Javascript
jQuery实现二级下拉菜单效果
Jan 05 Javascript
BootStrap实现带关闭按钮功能
Feb 15 Javascript
vue bootstrap小例子一枚
Jun 09 Javascript
JavaScript订单操作小程序完整版
Jun 23 Javascript
微信小程序开发之IOS和Android兼容的问题
Sep 26 Javascript
基于Vue2实现简易的省市区县三级联动组件效果
Nov 05 Javascript
vue实现图片上传功能
May 28 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在线生成ico文件的代码
2007/10/09 PHP
基于curl数据采集之正则处理函数get_matches的使用
2013/04/28 PHP
实例简介PHP的一些高级面向对象编程的特性
2015/11/27 PHP
PHP简单获取多个checkbox值的方法
2016/06/13 PHP
Yii2框架实现登录、退出及自动登录功能的方法详解
2017/10/24 PHP
php使用Swoole实现毫秒级定时任务的方法
2020/09/04 PHP
style、 currentStyle、 runtimeStyle区别分析
2010/08/01 Javascript
js加载读取内容及显示与隐藏div示例
2014/02/13 Javascript
关于JavaScript命名空间的一些心得
2014/06/07 Javascript
省市选择的简单实现(基于zepto.js)
2016/06/21 Javascript
Vue.js原理分析之observer模块详解
2017/02/17 Javascript
自带气泡提示的vue校验插件(vue-verify-pop)
2017/04/07 Javascript
validationEngine 表单验证插件使用实例代码
2017/06/15 Javascript
jQuery实现的鼠标滚轮控制图片缩放功能实例
2017/10/14 jQuery
vue2.0 兄弟组件(平级)通讯的实现代码
2018/01/15 Javascript
微信小程序实现bindtap等事件传参
2019/04/08 Javascript
微信公众号平台接口开发 获取access_token过程解析
2019/08/14 Javascript
JavaScript原生数组函数实例汇总
2020/10/14 Javascript
vue keep-alive的简单总结
2021/01/25 Vue.js
在Python中关于中文编码问题的处理建议
2015/04/08 Python
使用Python内置的模块与函数进行不同进制的数的转换
2016/03/12 Python
利用Python实现图书超期提醒
2016/08/02 Python
Python 制作糗事百科爬虫实例
2016/09/22 Python
使用python装饰器计算函数运行时间的实例
2018/04/21 Python
Django框架基础模板标签与filter使用方法详解
2019/07/23 Python
python3实现的zip格式压缩文件夹操作示例
2019/08/17 Python
python GUI库图形界面开发之PyQt5信号与槽的高级使用技巧装饰器信号与槽详细使用方法与实例
2020/03/06 Python
基于python计算滚动方差(标准差)talib和pd.rolling函数差异详解
2020/06/08 Python
解决pyinstaller 打包exe文件太大,用pipenv 缩小exe的问题
2020/07/13 Python
Django REST 异常处理详解
2020/07/15 Python
Eton丹麦官网:精美的男式衬衫
2020/05/27 全球购物
2014年建筑工作总结
2014/11/26 职场文书
军事博物馆观后感
2015/06/05 职场文书
python正则表达式re.search()的基本使用教程
2021/05/21 Python
用php如何解决大文件分片上传问题
2021/07/07 PHP
Windows11里微软已经将驱动程序安装位置A盘删除
2021/11/21 数码科技