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

事情经过是这样

    <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. Java 多线程详解(四)------生产者和消费者

    Java 多线程详解(一)------概念的引入:http://www.cnblogs.com/ysocean/p/6882988.html Java 多线程详解(二)------如何创建进程和线程: ...

  2. 【翻译】光速React – Vixlet

    翻译原文链接:https://blog.vixlet.com/react-at-light-speed-78cd172a6411 个人翻译小站链接:http://www.zcfy.cc/article ...

  3. 微信小程序 获取OpenId

    微信小程序 官方API:https://mp.weixin.qq.com/debug/wxadoc/dev/api/ 首先 以下代码是 页面加载请求用户 是否同意授权 同意之后 用code 访问 微信 ...

  4. WEB前端:浏览器(IE+Chrome+Firefox)常见兼容问题处理--01

    兼容问题目录 1.IE6下怪异盒模型 2.IE6下最小高度问题 3.IE6下不支持1px的点线 4.IE6下内容会把父级的高度撑开 5.IE6下只支持给a标签添加伪类 6.IE67下不支持给块标签加d ...

  5. 一天搞定CSS:字体font--04

    1.字体体系 2.字体各属性取值 说明: 每一个属性后面的分支是属性值,以及对属性值的说明. 比如font-weight- - - -有两个取值:bold,normal 3.演示代码 <!DOC ...

  6. Javascript事件模型(二):Javascript事件的父元素和子元素

    DOM事件标准定义了两种事件流,分别是捕获和冒泡.默认情况下,事件使用冒泡事件流,不使用捕获事件流.你可以指定使用捕获事件流,方法是在注册事件时传入useCapture参数,将这个参数设为true. ...

  7. Java中4种类型的内部类 .

    在Java中有4种不同类型的内部类可以使用.下面给出它们的名称和例子. 1.静态嵌套类(Static Nested Classes) class Outer { static class Inner  ...

  8. Vue.js 运行环境搭建详解(基于windows的手把手安装教学)及vue、node基础知识普及

    Vue.js 是一套构建用户界面的渐进式框架.他自身不是一个全能框架——只聚焦于视图层.因此它非常容易学习,非常容易与其它库或已有项目整合.在与相关工具和支持库一起使用时,Vue.js 也能完美地驱动 ...

  9. 最全面的Java字节byte操作,处理Java基本数据的转换及进制转换操作工具,流媒体及java底层开发项目常用工具类

    前言:用于处理Java基本数据的转换及进制转换操作工具 一.实现功能 1.int与byte互转 2.int与byte[]互转 3.short与byte互转 4.short与byte[]互转 5.16位 ...

  10. iOS enum C方法 DEBUG, RELEASE的隐藏的一个坑

    开发了一个app, 在debug模式下没有任何问题,在release模式下就直接崩溃. 经过一段时间的定位终于定位到如下的这一段代码: E_BZ_TestType type = [dic[@" ...