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代码通俗易懂(自写)
Jun 19 Javascript
showModalDialog模态对话框的使用详解以及浏览器兼容
Jan 11 Javascript
jQuery操作动态生成的内容的方法
May 28 Javascript
微信小程序 地图(map)实例详解
Nov 16 Javascript
利用Vue.js+Node.js+MongoDB实现一个博客系统(附源码)
Apr 24 Javascript
Node.js+Express+MySql实现用户登录注册功能
Jul 10 Javascript
JS实现二维数组元素的排列组合运算简单示例
Jan 28 Javascript
了解前端理论:rscss和rsjs
May 23 Javascript
微信小程序 image组件遇到的问题
May 28 Javascript
在weex中愉快的使用scss的方法步骤
Jan 02 Javascript
微信小程序实现签到弹窗动画
Sep 21 Javascript
jQuery冲突问题解决方法
Jan 19 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中对缓冲区的控制实现代码
2013/09/29 PHP
PHP中判断变量为空的几种方法小结
2013/11/12 PHP
php判断页面是否是微信打开的示例(微信打开网页)
2014/04/25 PHP
PHP实现链式操作的核心思想
2015/06/23 PHP
PHP创建文件,并向文件中写入数据,覆盖,追加的实现代码
2016/03/25 PHP
Windows下wamp php单元测试工具PHPUnit安装及生成日志文件配置方法
2018/05/28 PHP
再谈Yii Framework框架中的事件event原理与应用
2020/04/07 PHP
利用json获取字符出现次数的代码
2012/03/22 Javascript
jquery获取子节点和父节点的示例代码
2013/09/10 Javascript
jQuery图片特效插件Revealing实现拉伸放大
2015/04/22 Javascript
js实现延迟加载的方法
2015/06/24 Javascript
IE9+已经不对document.createElement向下兼容的解决方法
2015/09/14 Javascript
Bootstrap每天必学之按钮(一)
2015/11/24 Javascript
微信小程序 时间格式化(util.formatTime(new Date))详解
2016/11/16 Javascript
原生js实现手风琴功能(支持横纵向调用)
2017/01/13 Javascript
vue中的模态对话框组件实现过程
2018/05/01 Javascript
Angular动画实现的2种方式以及添加购物车动画实例代码
2018/08/09 Javascript
Vue.set()动态的新增与修改数据,触发视图更新的方法
2018/09/15 Javascript
Vue中的$set的使用实例代码
2018/10/08 Javascript
Vue Cli3 创建项目的方法步骤
2018/10/15 Javascript
10种JavaScript最常见的错误(小结)
2019/06/21 Javascript
iview的table组件自带的过滤器实现
2019/07/12 Javascript
vue实现短信验证码输入框
2020/04/17 Javascript
Node.js 中如何收集和解析命令行参数
2021/01/08 Javascript
python定时检查启动某个exe程序适合检测exe是否挂了
2013/01/21 Python
python中合并两个文本文件并按照姓名首字母排序的例子
2014/04/25 Python
Python KMeans聚类问题分析
2018/02/23 Python
Python使用add_subplot与subplot画子图操作示例
2018/06/01 Python
Django MEDIA的配置及用法详解
2019/07/25 Python
Python实现微信机器人的方法
2019/09/06 Python
python退出循环的方法
2020/06/18 Python
基于Modernizr 让网站进行优雅降级的分析
2013/04/21 HTML / CSS
在校生钳工实习自我鉴定
2013/09/19 职场文书
初中化学教学反思
2014/01/23 职场文书
劳动保障个人工作总结
2015/03/04 职场文书
大国崛起观后感
2015/06/02 职场文书