这个区别我估计大神都不知道,问题源于博主,细节被一个妹子发现的

事情经过是这样

    <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() 的区别的更多相关文章

  1. HTML5中类jQuery选择器querySelector的高级使用 document.querySelectorAll.bind(document);

    基本用法 querySelector 该方法返回满足条件的单个元素.按照深度优先和先序遍历的原则使用参数提供的CSS选择器在DOM进行查找,返回第一个满足条件的元素. ----> querySe ...

  2. document.querySelectorAll() 兼容 IE6

    不多说,直接上代码 // 使用 css 选择器获取元素对象 兼容性封装 Test Already. function getElementsByCss(cssStr){ if(document.que ...

  3. js 原生 document.querySelectorAll document.getElementsByTagName document.querySelector document.getElementById的区别

    1.querySelector只返回匹配的第一个元素,如果没有匹配项,返回null.  2.querySelectorAll返回匹配的元素集合,如果没有匹配项,返回空的nodelist(节点数组). ...

  4. document.getElementById和document.querySelector的区别

    zepto中的$(".111")出错,jQuery中$(".111")不出错的原因: zepto用document.querySelector实现,jQuery ...

  5. document.querySelector()与document.querySelectorAll()

      document.querySelector()与document.querySelectorAll() CreationTime--2018年7月1日10点49分 Author:Marydon ...

  6. 谈谈document.ready和window.onload的区别

    在Jquery里面,我们可以看到两种写法:$(function(){}) 和$(document).ready(function(){}) 这两个方法的效果都是一样的,都是在dom文档树加载完之后执行 ...

  7. Array.prototype.slice.call(document.querySelectorAll('a'), 0)

    Array.prototype.slice.call(document.querySelectorAll('a'), 0)的作用就是将一个DOM NodeList 转换成一个数组. slice()方法 ...

  8. document.body、document.documentElement和window获取视窗大小的区别

    来源:http://www.ido321.com/906.html 在w3school关于window对象的介绍中,介绍了获取浏览器窗口大小的三种方法(浏览器的视口,不包括工具栏和滚动条). 对于In ...

  9. 如何循环遍历document.querySelectorAll()方法返回的结果

    使用JavaScript的forEach方法,我们可以轻松的循环一个数组,但如果你认为document.querySelectorAll()方法返回的应该是个数组,而使用forEach循环它: /* ...

随机推荐

  1. 超声波 HC-SR04

    三.实验原理 1. 超声波传感器简介 超声波测距系统主要应用于汽车的倒车雷达.及机器人自动避障行走.建筑施工工地以及一些工业现场例如:液位.井深.管道长度等场合.超声波是一种在弹性介质中的机械振荡,有 ...

  2. Oracle 只导出某个用户下的表及数据

    今天某大牛问我要之前我参与的一个系统的代码及库,我捣鼓下,发给了他. 他很诧异的问:这个库有这么大么 我说 因为当时是专门新建了一个实例,用户也是系统用户,所以导出的时候是导出的整个数据库 他 ZZ ...

  3. java虚拟机学习-慢慢琢磨JVM(2-1)ClassLoader的工作机制

    ClassLoader的工作机制 java应用环境中不同的class分别由不同的ClassLoader负责加载. 一个jvm中默认的classloader有Bootstrap ClassLoader. ...

  4. Images as x-axis labels

    Open-source software is awesome. If I found that a piece of closed-source software was missing a fea ...

  5. C#操作CAD-初始化、引用dll

    操作cad等方式有很多,比如C,C++,vb.lisp(效率最高,但是语言结构性太差)和C#,因为我等个人习惯和方便等原因,在此讲解一下用C#操作流程,后续会更新操作图层.扩展数据.绘图等操作步骤.当 ...

  6. 入职这一段时间的总结,Don't Repeat Yourself.

    1.第一次接触到大型软件系统的开发,现在我们使用的是 python + flask +vue.js ,数据库:postgresql 2. 不要在自己不懂的情况下复制代码,每次分析一段代码的时候,就跟以 ...

  7. INFORMATION_SCHEMA.PROFILING

    24.18 The INFORMATION_SCHEMA PROFILING Table PROFILING表提供了语句分析信息. 其内容对应于SHOW PROFILES和SHOW PROFILE语句 ...

  8. 一天搞定CSS:支持IE的Layout布局--16

    1.BFC和Layout区别: BFC和Layout的作用是一样的,只是对浏览器的支持不同而已. BFC- -标准浏览器所具有的 Layout- -IE浏览器所具有的 BFC详解地址:http://b ...

  9. Spring+SpringMVC+MyBatis深入学习及搭建(九)——MyBatis和Spring整合

    转载请注明出处:http://www.cnblogs.com/Joanna-Yan/p/6964162.html 前面讲到:Spring+SpringMVC+MyBatis深入学习及搭建(八)--My ...

  10. 关于eclipse新建web项目,提示:"The superclass "javax.servlet.http.HttpServlet" was not found on the Java"解决办法

    新建jsp页面老提示: Multiple annotations found at this line: - The superclass "javax.servlet.http.HttpS ...