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 相关文章推荐
DHTML 中的绝对定位
Nov 26 Javascript
js利用与或运算符优先级实现if else条件判断表达式
Apr 15 Javascript
jquery 选择器引擎sizzle浅析
Feb 06 Javascript
jquery DIV撑大让滚动条滚到最底部代码
Jun 06 Javascript
assert()函数用法总结(推荐)
Jan 25 Javascript
微信小程序 获取javascript 里的数据
Aug 17 Javascript
基于 Vue.js 2.0 酷炫自适应背景视频登录页面实现方式
Jan 17 Javascript
vue进行图片的预加载watch用法实例讲解
Feb 07 Javascript
vue init webpack myproject构建项目 ip不能访问的解决方法
Mar 20 Javascript
koa2+vue实现登陆及登录状态判断
Aug 15 Javascript
详细分析vue响应式原理
Jun 22 Javascript
element-ui中el-upload多文件一次性上传的实现
Dec 02 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截取字符串函数分享(截取中文字符串)
2014/03/13 PHP
Smarty中的注释和截断功能介绍
2015/04/09 PHP
php判断邮箱地址是否存在的方法
2016/02/13 PHP
Laravel5.5新特性之友好报错以及展示详解
2017/08/13 PHP
php实现获取近几日、月时间示例
2019/07/06 PHP
node.js中的fs.chmod方法使用说明
2014/12/18 Javascript
使用 TypeScript 重新编写的 JavaScript 坦克大战游戏代码
2015/04/07 Javascript
jQuery可见性过滤选择器用法示例
2016/09/09 Javascript
从零开始学习Node.js系列教程五:服务器监听方法示例
2017/04/13 Javascript
详解基于 axios 的 Vue 项目 http 请求优化
2017/09/04 Javascript
js使用ajax传值给后台,后台返回字符串处理方法
2018/08/08 Javascript
解决vue中修改export default中脚本报一大堆错的问题
2018/08/27 Javascript
详解webpack 最简打包结果分析
2019/02/20 Javascript
基于JS实现一个随机生成验证码功能
2019/05/29 Javascript
微信小程序判断用户是否需要再次授权获取个人信息
2019/07/18 Javascript
js针对图片加载失败的处理方法分析
2019/08/24 Javascript
解决vue v-for src 图片路径问题 404
2019/11/12 Javascript
JS实现手写 forEach算法示例
2020/04/29 Javascript
vue.js封装switch开关组件的操作
2020/10/26 Javascript
[01:03:41]DOTA2-DPC中国联赛 正赛 Dynasty vs XG BO3 第三场 2月2日
2021/03/11 DOTA
Python实现发送email的几种常用方法
2014/08/18 Python
python静态方法实例
2015/01/14 Python
python操作mongodb根据_id查询数据的实现方法
2015/05/20 Python
Python正则表达式使用范例分享
2016/12/04 Python
pytorch自定义二值化网络层方式
2020/01/07 Python
白色公司:The White Company
2017/10/11 全球购物
Carter’s官方旗舰店:美国受欢迎的婴童服装品牌
2018/01/21 全球购物
小学校园之星事迹材料
2014/05/16 职场文书
优秀毕业生找工作自荐信
2014/06/23 职场文书
法律专业大学生职业生涯规划书:向目标一步步迈进
2014/09/22 职场文书
委托证明范本
2014/11/25 职场文书
费城故事观后感
2015/06/10 职场文书
单位车辆管理制度
2015/08/05 职场文书
2016年学校招生广告语
2016/01/28 职场文书
导游词之上饶龟峰
2019/10/25 职场文书
IDEA 链接Mysql数据库并执行查询操作的完整代码
2021/05/20 MySQL