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 页面编码与浏览器类型判断代码
Jun 03 Javascript
解决3.01版的jquery.form.js中文乱码问题的解决方法
Mar 08 Javascript
jQuery图片滚动图片的效果(另类实现)
Jun 02 Javascript
获取鼠标在div中的相对位置的实现代码
Dec 30 Javascript
BootStrap初学者对弹出框和进度条的使用感觉
Jun 27 Javascript
Angular4实现鼠标悬停3d倾斜效果
Oct 25 Javascript
react-router v4如何使用history控制路由跳转详解
Jan 09 Javascript
mpvue构建小程序的方法(步骤+地址)
May 22 Javascript
浅析前端路由简介以及vue-router实现原理
Jun 01 Javascript
详解Vue CLI3配置解析之css.extract
Sep 14 Javascript
使用Jenkins部署React项目的方法步骤
Mar 11 Javascript
监听element-ui table滚动事件的方法
Mar 26 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 strstr查找字符串中是否包含某些字符的查找函数
2010/06/03 PHP
php skymvc 一款轻量、简单的php
2011/06/28 PHP
工厂模式在Zend Framework中应用介绍
2012/07/10 PHP
64位windows系统下安装Memcache缓存
2015/12/06 PHP
Symfony2中被遗弃的getRequest()方法分析
2016/03/17 PHP
PHP判断JSON对象是否存在的方法(推荐)
2016/07/06 PHP
javascript时区函数介绍
2012/09/14 Javascript
JQuery给select添加/删除节点的实现代码
2016/04/26 Javascript
利用css+原生js制作简单的钟表
2020/04/07 Javascript
Bootstarp基本模版学习教程
2017/02/01 Javascript
JS日程管理插件FullCalendar中文说明文档
2017/02/06 Javascript
js基于myFocus实现轮播图效果
2017/02/14 Javascript
详解使用angularjs的ng-options时如何设置默认值(初始值)
2017/07/18 Javascript
Mobile Web开发基础之四--处理手机设备的横竖屏问题
2017/08/11 Javascript
通过V8源码看一个关于JS数组排序的诡异问题
2017/08/14 Javascript
带你了解session和cookie作用原理区别和用法
2017/08/14 Javascript
详解关于vue-area-linkage走过的坑
2018/06/27 Javascript
小程序实现层叠卡片滑动效果
2019/08/26 Javascript
解决Vue中的生命周期beforeDestory不触发的问题
2020/07/21 Javascript
python计算两个矩形框重合百分比的实例
2018/11/07 Python
Python中常用的8种字符串操作方法
2019/05/06 Python
PyQt5实现简易电子词典
2019/06/25 Python
在python中,使用scatter绘制散点图的实例
2019/07/03 Python
tensorflow 获取checkpoint中的变量列表实例
2020/02/11 Python
纯CSS3制作的简洁蓝白风格的登录模板(非IE效果更好)
2013/08/11 HTML / CSS
HTML5 Canvas实现放大镜效果示例
2020/03/25 HTML / CSS
美国伴娘礼服商店:Evening Collective
2019/10/07 全球购物
中兴通讯全球官方网站:ZTE
2020/12/26 全球购物
农村婚礼主持词
2014/03/13 职场文书
加强作风建设演讲稿
2014/10/24 职场文书
农村结婚典礼主持词
2015/06/29 职场文书
党员学习型组织心得体会
2019/06/21 职场文书
一起来看看Vue的核心原理剖析
2022/03/24 Vue.js
win10键盘驱动怎么修复?Win10键盘驱动修复小技巧
2022/04/06 数码科技
4种方法python批量修改替换列表中元素
2022/04/07 Python