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循环它: /* ...
随机推荐
- Hibernate学习笔记二:Hibernate缓存策略详解
一:为什么使用Hibernate缓存: Hibernate是一个持久层框架,经常访问物理数据库. 为了降低应用程序访问物理数据库的频次,从而提高应用程序的性能. 缓存内的数据是对物理数据源的复制,应用 ...
- EntityFramework6.X 之 Database Initialization
Database Initialization 下图是数据库初始化的工作流 EF为数据库初始化准备了多种策略: l CreateDatabaseIfNotExists:这是默认的初始化策略 l D ...
- 简易数据加密传输电路(VHDL)(原创)
LIBRARY IEEE; USE IEEE.STD_LOGIC_1164.ALL; USE IEEE.std_logic_unsigned.ALL; ENTITY KEKE IS --定义实体wsj ...
- Spring Security教程系列(一)基础篇-1
第 1 章 一个简单的HelloWorld 第 1 章 一个简单的HelloWorld Spring Security中可以使用Acegi-1.x时代的普通配置方式,也可以使用从2.0时代才出现的命名 ...
- XSS研究1-来自外部的XSS攻击
引入: 上文中我们的例子是研究了来自内部的XSS攻击,通过输送一段有害js代码到受害者的机器,让其在受害者的域上运行这段有害JS代码来得到入侵目的.现在我们来看下来自外部的XSS攻击. 实践: 下面还 ...
- 开涛spring3(9.2) - Spring的事务 之 9.2 数据库事务概述
9.2.1 概述 Spring框架支持事务管理的核心是事务管理器抽象,对于不同的数据访问框架(如Hibernate)通过实现策略接口 PlatformTransactionManager,从而能支持 ...
- Swift 入门之简单语法(四)
函数 目标 掌握函数的定义 掌握外部参数的用处 掌握无返回类型的三种函数定义方式 代码实现 函数的定义 格式 func 函数名(行参列表) -> 返回值 {代码实现} 调用 let result ...
- Hibernate与Jpa的关系(2)
[转自:http://blog.163.com/hero_213/blog/static/398912142010312024809/ ] 近年来ORM(Object-Relational Mappi ...
- Angular随笔第二课
一. 列表表格以及其它迭代型元素 ng-repeat 可能是最有用的angular指令了,它可以根据集合中的项目一次创建一组元素的多份拷贝.不管在什么地方,只要你想创建一组事物的列表,你就可以使用这 ...
- HTML面试题
1.你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? 所谓的“浏览器内核”无非指的是一个浏览器最核心的部分-“Rendering Engine”,直译叫做“渲染引擎”,我们也常称为“排版引擎 ...