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去除右边逗号的简单方法
Jul 03 Javascript
jquery中选择块并改变属性值的方法
Jul 31 Javascript
js函数调用的方式
May 06 Javascript
javascript使用window.open提示“已经计划系统关机”的原因
Aug 15 Javascript
JS实现图片平面旋转的方法
Mar 01 Javascript
Jquery实现遮罩层的简单实例(就是弹出DIV周围都灰色不能操作)
Jul 14 Javascript
Bootstrap文件上传组件之bootstrap fileinput
Nov 25 Javascript
如何在Angular.JS中接收并下载PDF
Nov 26 Javascript
Vue.js表单标签中的单选按钮、复选按钮和下拉列表的取值问题
Nov 22 Javascript
详解在vue-test-utils中mock全局对象
Nov 07 Javascript
详解Vue.js自定义tipOnce指令用法实例
Dec 19 Javascript
动态实现element ui的el-table某列数据不同样式的示例
Jan 22 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
用文本文件制作留言板提示(下)
2006/10/09 PHP
PHP echo,print,printf,sprintf函数之间的区别与用法详解
2013/11/27 PHP
php 如何获取文件的后缀名
2016/06/05 PHP
Thinkphp批量更新数据的方法汇总
2016/06/29 PHP
jquery validation验证身份证号,护照,电话号码,email(实例代码)
2013/11/06 Javascript
使用focus方法让光标默认停留在INPUT框
2014/07/29 Javascript
使用jquery解析XML的方法
2014/09/05 Javascript
js获取当前时间显示在页面上并每秒刷新
2014/12/24 Javascript
JavaScript中的Math.atan2()方法使用详解
2015/06/15 Javascript
Backbone.js框架中Model与Collection的使用实例
2016/05/07 Javascript
Javascript中this绑定的3种方法与比较
2016/10/13 Javascript
详解如何使用webpack+es6开发angular1.x
2017/08/16 Javascript
vue父组件向子组件(props)传递数据的方法
2018/01/02 Javascript
jQuery niceScroll滚动条错位问题的解决方法
2018/02/03 jQuery
linux 后台运行node服务指令方法
2018/05/23 Javascript
小程序实现单选多选功能
2018/11/04 Javascript
[05:45]Ti4观战指南(下)
2014/07/07 DOTA
[01:02]DOTA2辉夜杯决赛日 CDEC.Y对阵VG赛前花絮
2015/12/27 DOTA
python笔记:mysql、redis操作方法
2017/06/28 Python
django 修改server端口号的方法
2018/05/14 Python
python Web开发你要理解的WSGI & uwsgi详解
2018/08/01 Python
Pycharm更换python解释器的方法
2018/10/29 Python
python实现大转盘抽奖效果
2019/01/22 Python
python读csv文件时指定行为表头或无表头的方法
2019/06/26 Python
python django 原生sql 获取数据的例子
2019/08/14 Python
关于ZeroMQ 三种模式python3实现方式
2019/12/23 Python
世界上最大的餐具公司:Oneida
2016/12/17 全球购物
Scholastic父母商店:儿童书籍
2017/01/01 全球购物
可口可乐唇膏:Lip Smackers
2019/08/27 全球购物
ktv收银员岗位职责
2013/12/16 职场文书
就业协议书范本
2014/04/11 职场文书
奥巴马就职演讲稿
2014/05/15 职场文书
村主任群众路线个人对照检查材料
2014/09/26 职场文书
大学生助学金感谢信
2015/01/21 职场文书
管辖权异议上诉状
2015/05/23 职场文书
一篇文章告诉你如何实现Vue前端分页和后端分页
2022/02/18 Vue.js