document.querySelectorAll() 与document.getElementTagName() 的区别
这个区别我估计大神都不知道,问题源于博主,细节被一个妹子发现的
事情经过是这样
<ul>
<li>item</li>
<li></li>
<li></li>
<li>item</li>
<li>item</li>
</ul>
第一阶段
//本人折腾了一个循环
var alis = document.getElementTagName('li')
for(var i = 0 ;i < alis.length ; i++ ){
if(alis[i].innerHtml ==""){
alis[i].parentNode.removeChild( alis[i] )
}
}
- 一眼看上,呢吗还用想码,------一个大大的 3
- 答案一运行结果页面出现四个 li
这是为什么呢---因为每次for循环alis.length 是一个动态:这一点很多人都知道
只不过第一眼看过忽略了。所以心里稳妥妥的---答案立马变成了4
第二阶段:事情的高潮阶段
本人以高心,就开始四处扩散谣言,结果这时妹子,写了个demo,一巴掌大我脸上
-- 蒸腾
var alis = document.querySelectorAll('li')
for(var i = 0 ;i < alis.length ; i++ ){
if(alis[i].innerHtml ==""){
alis[i].parentNode.removeChild( alis[i] )
}
}
//直接上结果了-----3
第三阶段:我瞬间林乱了,这时什么鬼
- 。。。。。。。 一万只神兽飞过。。。。。。。
本剧终
querySelectorAll 得到是一个数组 -nodelist
getElementTagName得到是一个伪数组 --dom的结合
至于以上为什么会有区别;这锅只能丢给规范---一句话规范如此
虽然被大脸,不过这波姿势长的好,求天天打脸
document.querySelectorAll() 与document.getElementTagName() 的区别的更多相关文章
- HTML5中类jQuery选择器querySelector的高级使用 document.querySelectorAll.bind(document);
基本用法 querySelector 该方法返回满足条件的单个元素.按照深度优先和先序遍历的原则使用参数提供的CSS选择器在DOM进行查找,返回第一个满足条件的元素. ----> querySe ...
- document.querySelectorAll() 兼容 IE6
不多说,直接上代码 // 使用 css 选择器获取元素对象 兼容性封装 Test Already. function getElementsByCss(cssStr){ if(document.que ...
- js 原生 document.querySelectorAll document.getElementsByTagName document.querySelector document.getElementById的区别
1.querySelector只返回匹配的第一个元素,如果没有匹配项,返回null. 2.querySelectorAll返回匹配的元素集合,如果没有匹配项,返回空的nodelist(节点数组). ...
- document.getElementById和document.querySelector的区别
zepto中的$(".111")出错,jQuery中$(".111")不出错的原因: zepto用document.querySelector实现,jQuery ...
- document.querySelector()与document.querySelectorAll()
document.querySelector()与document.querySelectorAll() CreationTime--2018年7月1日10点49分 Author:Marydon ...
- 谈谈document.ready和window.onload的区别
在Jquery里面,我们可以看到两种写法:$(function(){}) 和$(document).ready(function(){}) 这两个方法的效果都是一样的,都是在dom文档树加载完之后执行 ...
- Array.prototype.slice.call(document.querySelectorAll('a'), 0)
Array.prototype.slice.call(document.querySelectorAll('a'), 0)的作用就是将一个DOM NodeList 转换成一个数组. slice()方法 ...
- document.body、document.documentElement和window获取视窗大小的区别
来源:http://www.ido321.com/906.html 在w3school关于window对象的介绍中,介绍了获取浏览器窗口大小的三种方法(浏览器的视口,不包括工具栏和滚动条). 对于In ...
- 如何循环遍历document.querySelectorAll()方法返回的结果
使用JavaScript的forEach方法,我们可以轻松的循环一个数组,但如果你认为document.querySelectorAll()方法返回的应该是个数组,而使用forEach循环它: /* ...
随机推荐
- OpenCV探索之路(十三):详解掩膜mask
在OpenCV中我们经常会遇到一个名字:Mask(掩膜).很多函数都使用到它,那么这个Mask到底什么呢? 一开始我接触到Mask这个东西时,我还真是一头雾水啊,也对无法理解Mask到底有什么用.经过 ...
- (数字IC)低功耗设计入门(三)——系统与架构级
前面讲解了使用EDA工具(主要是power compiler)进行功耗分析的流程,这里我们将介绍在数字IC中进行低功耗设计的方法,同时也结合EDA工具(主要是Design Compiler)如何实现. ...
- Java servlet ajax
AJAX 是与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下. AJAX = 异步 JavaScript 和 XML. AJAX 是一种用于创建快速动态网页的技术. http://w ...
- 将 FFmpeg 移植到 Android平台 (完整版)
首先需要去FFmpeg的官网http://www.ffmpeg.org/去下载FFmpeg的源码,目前的版本号为FFmpeg3.3(Hilbert). 下载的文件为压缩包,解压后得到ffmpeg-3. ...
- OpenGL教程(0)——介绍
OpenGL介绍 OpenGL,全称Open Graphics Library,是一个用C语言写的图形API.通俗地说,OpenGL用来绘制2D/3D图形.目前OpenGL的运用十分广泛,有许多用Op ...
- Open vSwitch中的datapath flow匹配过程
看OVS2.7的datapath表项匹配是一件很蛋疼的事情 数据结构看不懂 匹配算法经过了多次演进,已经有点复杂了,看代码完全看不懂,我能怎么办,我也很绝望啊! 2.1之前精确匹配时代,匹配过程是 ...
- C++进阶引导
1.C++的用途和意义 t0185b047e29feffc26.jpg 总体来说,C++作为一门软件开发语言,它的流行度是在减少的.主要原因在于语言的复杂和灵活导致软件开发成本提高,这体现在开发周期和 ...
- Unity 打包总结和资源的优化和处理
1. Texture,都去掉alpha通道,作为背景展示的图片,基本都没有透明要求,有特殊要求的则放到atlas里面 a. Loading图这类需要比较精细的,则把图片设置为Automatic Tru ...
- WINDOWS程序设计对话框加载显示bmp图像及刷新
参考文章:http://blog.csdn.net/wangjian8006/article/details/7464431 图片的加载与显示也是属于窗口绘制这一部分的.所以其代码要写在消息函数的WM ...
- openjdk8之编译和debug
系统环境为ubuntu 16.04,uname -a: Linux ddy-Aspire-V5-573G 4.4.0-21-generic #37-Ubuntu SMP Mon Apr 18 18:3 ...