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循环它: /* ...
随机推荐
- JS 正则表达式否定匹配(正向前瞻)
引言:JS 正则表达式是 JS 学习过程中的一大难点,繁杂的匹配模式足以让人头大,不过其复杂性和其学习难度也赋予了它强大的功能.文章从 JS 正则表达式的正向前瞻说起,实现否定匹配的案例.本文适合有一 ...
- 从零开始的JS生活(二)——BOM、DOM与JS中的事件
上回书说道,JS中变量.运算符.分支结构.循环和嵌套循环等内容.本回就由本K给大伙唠唠JS中的BOM.DOM和事件. 一."花心大萝卜"--BOM 1.震惊,FFF团为何对BOM举 ...
- 网页中使用CSS和JS阻止用户选择内容
CSS实现 body{ -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; ...
- JavaScript 循环性能比较
有一句话叫做 没有什么事是一个循环解决不了的,如果真有,那就再来一个循环. 循环的种类有很多 正向for循环,逆向for循环,while循环,for-in循环(理论上性能最差),for-each循环, ...
- cpp(第三章)
1.使用{}初始化时,{}若为空则默认初始化为0,至于防范类型转化错误 2.int对计算机而言最为自然的长度,处理起来效率最高的长度.int可能是short(16位)也可能是long(32位),在知道 ...
- java计算某个日期是什么节气(24节气)
package com.test; import java.util.Calendar; import java.util.Date; /** * Created by json */ public ...
- react 基础
一.组件 函数式定义的无状态组件 es5原生方式React.createClass定义的组件 es6形式的extends React.Component定义的组件 React.Component是以E ...
- JSON 转换异常 multipartRequestHandler servletWrapper
下面出现红色的字还有警告,解决方法:本人项目是struts1 from类继承了“extends ActionForm” .把它去掉就行了.如果你是其它的框架一定是继承引起的作个参考吧. ....... ...
- Bash的命令替换
命令替换:将命令替换为命令的输出,所有的shell支持使用反引号的方法进行命令替换.Bash支持两种形式:$(command) 和`command`命令替换是可以嵌套的,如果使用反引号的形式,在内部反 ...
- javascript基础数据类型与引用类型
javascript一共有6种数据类型 有5种基本类型:Null,String Number,Boolean,Undefined 和一种引用类型Object 基础类型在内存中存在于栈空间中,例如 va ...