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 相关文章推荐
JavaScript的目的分析
Jan 05 Javascript
jquery事件与函数的使用介绍
Sep 29 Javascript
jQuery.deferred对象使用详解
Mar 18 Javascript
js 弹出虚拟键盘修改密码的简单实例
Oct 10 Javascript
Angular2表单自定义验证器的实现
Oct 19 Javascript
浅述节点的创建及常见功能的实现
Dec 15 Javascript
原生js仿淘宝网商品放大镜效果
Feb 28 Javascript
js手机号4位显示空格,银行卡每4位显示空格效果
Mar 23 Javascript
微信小程序的日期选择器的实例详解
Sep 29 Javascript
基于vue-cli 打包时抽离项目相关配置文件详解
Mar 07 Javascript
Vue.js获取被选择的option的value和text值方法
Aug 24 Javascript
layer.msg()去掉默认时间,实现手动关闭的方法
Sep 12 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文章内容分页并生成相应的htm静态页面代码
2010/06/07 PHP
深入理解PHP几个算法:PHP冒泡、PHP二分法、PHP求素数、PHP乘法表
2013/06/06 PHP
JQuery SELECT单选模拟jQuery.select.js
2009/11/12 Javascript
ajax异步刷新实现更新数据库
2012/12/03 Javascript
jQuery数据缓存功能的实现思路及简单模拟
2013/05/27 Javascript
浏览器兼容console对象的简要解决方案分享
2013/10/24 Javascript
jquery.validate.js插件使用经验记录
2014/07/02 Javascript
TypeScript 学习笔记之基本类型
2015/06/19 Javascript
javascript实现图片轮播效果
2016/01/20 Javascript
vue.js获取数据库数据实例代码
2017/05/26 Javascript
angular2路由切换改变页面title的示例代码
2017/08/23 Javascript
vue监听scroll的坑的解决方法
2017/09/07 Javascript
vue-router配合ElementUI实现导航的实例
2018/02/11 Javascript
vue+element-ui实现表格编辑的三种实现方式
2018/10/31 Javascript
echarts实现晶体球面投影的实例教程
2020/10/10 Javascript
Javascript实现关闭广告效果
2021/01/29 Javascript
[02:07]TI9显影之尘系列 - Vici Gaming
2019/08/20 DOTA
python自动化测试之连接几组测试包实例
2014/09/28 Python
Python中的True,False条件判断实例分析
2015/01/12 Python
详解Python中with语句的用法
2015/04/15 Python
在Python中操作文件之truncate()方法的使用教程
2015/05/25 Python
python微信公众号开发简单流程
2018/03/23 Python
python将list转为matrix的方法
2018/12/12 Python
Django生成PDF文档显示网页上以及PDF中文显示乱码的解决方法
2019/12/17 Python
详解CSS3中使用gradient实现渐变效果的方法
2015/08/18 HTML / CSS
几个解决兼容IE6\7\8不支持html5标签的几个方法
2013/01/07 HTML / CSS
什么是网络协议
2016/04/07 面试题
私人会所最新创业计划书范文
2014/03/24 职场文书
幼儿园中班上学期评语
2014/04/18 职场文书
求职信怎么写
2014/05/23 职场文书
2015纪念九一八事变84周年演讲稿
2015/03/19 职场文书
房地产项目合作意向书
2015/05/08 职场文书
2016年敬老月活动总结
2016/04/05 职场文书
导游词之台湾阿里山
2019/10/23 职场文书
导游词之南京汤山温泉
2019/11/26 职场文书
vue+spring boot实现校验码功能
2021/05/27 Vue.js