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 相关文章推荐
图片完美缩放
Sep 07 Javascript
jquery.validate使用攻略 第一部
Jul 01 Javascript
基于jquery的复制网页内容到WORD的实现代码
Feb 16 Javascript
javascript 兼容所有浏览器的DOM扩展功能
Aug 01 Javascript
JS图片预加载 JS实现图片预加载应用
Dec 03 Javascript
用JavaScript显示浏览器客户端信息的超相近教程
Jun 18 Javascript
使用Javascript实现选择下拉菜单互移并排序
Feb 23 Javascript
jQuery stop()用法实例详解
Jul 28 Javascript
JavaScript中this的用法实例分析
Dec 19 Javascript
详解如何提高 webpack 构建 Vue 项目的速度
Jul 03 Javascript
javascript 构建模块化开发过程解析
Sep 11 Javascript
详解Vue slot插槽
Nov 20 Vue.js
各浏览器中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 正则表达式之正则处理函数小结(preg_match,preg_match_all,preg_replace,preg_split)
2012/10/05 PHP
PHP时间戳与日期之间转换的实例介绍
2013/04/19 PHP
PHP函数addslashes和mysql_real_escape_string的区别
2014/04/22 PHP
php+mysqli实现批量执行插入、更新及删除数据的方法
2015/01/29 PHP
SESSION存放在数据库用法实例
2015/08/08 PHP
PHP获取网页所有连接的方法(附demo源码下载)
2016/03/30 PHP
thinkPHP3.1验证码的简单实现方法
2016/04/22 PHP
php数据访问之查询关键字
2016/05/09 PHP
createElement与createDocumentFragment的点点区别小结
2011/12/19 Javascript
js键盘上下左右键怎么触发function(实例讲解)
2013/12/14 Javascript
js实现图片上传并正常显示
2015/12/19 Javascript
js实现人民币大写金额形式转换
2016/04/27 Javascript
Javascript基础_简单比较undefined和null 值
2016/06/14 Javascript
jQuery简单注册和禁用全局事件的方法
2016/07/25 Javascript
使用UrlConnection实现后台模拟http请求的简单实例
2017/01/04 Javascript
使用canvas及js简单生成验证码方法
2017/04/02 Javascript
微信小程序教程系列之设置标题栏和导航栏(7)
2020/06/29 Javascript
vue轮播图插件vue-awesome-swiper的使用代码实例
2017/07/10 Javascript
JavaScript链式调用实例浅析
2018/12/19 Javascript
jQuery鼠标滑过横向时间轴样式(代码详解)
2019/11/01 jQuery
python中map()函数的使用方法示例
2017/09/29 Python
python使用Pycharm创建一个Django项目
2018/03/05 Python
用python 批量更改图像尺寸到统一大小的方法
2018/03/31 Python
Python实现删除排序数组中重复项的两种方法示例
2019/01/31 Python
在Python中居然可以定义两个同名通参数的函数
2019/01/31 Python
python查看文件大小和文件夹内容的方法
2019/07/08 Python
Pytorch 解决自定义子Module .cuda() tensor失败的问题
2020/06/23 Python
使用useBean标志初始化BEAN时如何接受初始化参数
2012/02/11 面试题
c语言常见笔试题总结
2016/09/05 面试题
试述DBMS的主要功能
2016/11/13 面试题
霸王洗发水广告词
2014/03/14 职场文书
学雷锋志愿者活动方案
2014/08/21 职场文书
2014年行风建设工作总结
2014/12/01 职场文书
小学记事作文之200字
2019/08/06 职场文书
如何使用Python实现一个简易的ORM模型
2021/05/12 Python
mybatis 获取无数据的字段不显示的问题
2021/07/15 Java/Android