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 相关文章推荐
Jquery数独游戏解析(一)-页面布局
Nov 05 Javascript
JavaScript模块规范之AMD规范和CMD规范
Oct 27 Javascript
JavaScript+html5 canvas绘制的圆弧荡秋千效果完整实例
Jan 26 Javascript
json与jsonp知识小结(推荐)
Aug 16 Javascript
jQuery EasyUI常用数据验证汇总
Sep 18 Javascript
jq给页面添加覆盖层遮罩的实例
Feb 16 Javascript
js实现分页功能
May 24 Javascript
JavaScript之json_动力节点Java学院整理
Jun 29 Javascript
vue里面v-bind和Props 利用props绑定动态数据的方法
Aug 27 Javascript
原生js检测页面加载完毕的实例
Sep 11 Javascript
Vue中Table组件Select的勾选和取消勾选事件详解
Mar 19 Javascript
微信小程序跨页面数据传递事件响应实现过程解析
Dec 19 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
图片存储与浏览一例(Linux+Apache+PHP+MySQL)
2006/10/09 PHP
PHP经典的给图片加水印程序
2006/12/06 PHP
PHP+.htaccess实现全站静态HTML文件GZIP压缩传输(一)
2007/02/15 PHP
php获取指定(访客)IP所有信息(地址、邮政编码、国家、经纬度等)的方法
2015/07/06 PHP
基于ThinkPHP实现的日历功能实例详解
2017/04/15 PHP
JS日期加减,日期运算代码
2015/11/05 Javascript
JS组件Bootstrap dropdown组件扩展hover事件
2016/04/17 Javascript
JavaScript操作选择对象的简单实例
2016/05/16 Javascript
第一篇初识bootstrap
2016/06/21 Javascript
jsp 网站引入外部css或者js失效问题解决
2016/10/31 Javascript
jQuery插件DataTable使用方法详解(.Net平台)
2016/12/22 Javascript
js判断手机号是否正确并返回的实现代码
2017/01/17 Javascript
Vuejs仿网易云音乐实现听歌及搜索功能
2017/03/30 Javascript
JavaScript数据结构与算法之队列原理与用法实例详解
2017/11/22 Javascript
Angular实现点击按钮后在上方显示输入内容的方法
2017/12/27 Javascript
详解html-webpack-plugin插件(用法总结)
2018/09/12 Javascript
AngularJS 监听变量变化的实现方法
2018/10/09 Javascript
js防抖和节流的深入讲解
2018/12/06 Javascript
微信小程序实现简单跑马灯效果
2020/05/26 Javascript
js中null与空字符串""的区别讲解
2019/01/17 Javascript
vue 实现cli3.0中使用proxy进行代理转发
2019/10/30 Javascript
《javascript设计模式》学习笔记五:Javascript面向对象程序设计工厂模式实例分析
2020/04/08 Javascript
跟老齐学Python之玩转字符串(2)
2014/09/14 Python
Python Sql数据库增删改查操作简单封装
2016/04/18 Python
python实现文本界面网络聊天室
2018/12/12 Python
python3实现斐波那契数列(4种方法)
2019/07/15 Python
Python中BeautifuSoup库的用法使用详解
2019/11/15 Python
Python实现初始化不同的变量类型为空值
2020/06/02 Python
使用keras实现非线性回归(两种加激活函数的方式)
2020/07/05 Python
python中pyqtgraph知识点总结
2021/01/26 Python
python 实现有道翻译功能
2021/02/26 Python
戴森美国官网:Dyson美国
2016/09/11 全球购物
全球最大的跑步用品商店:Road Runner Sports
2016/09/11 全球购物
七年级作文之环保作文
2019/10/17 职场文书
Vscode中SSH插件如何远程连接Linux
2022/05/02 Servers
Java实现贪吃蛇游戏的示例代码
2022/09/23 Java/Android