child和childNodes的区别
child和childNodes区别：
childNodes是标准属性， child是非标准属性
childNodes： 获取节点，不同浏览器表现不同
- IE 只获取元素节点
- 非IE 获取元素节点和文本节点
解决方案： if(元素.nodeName=="#text") continue 或者 if(元素.nodeType != '3') continue
- children: 获取元素节点，浏览器表现相同（如果只想获取DOM节点，使用children就行）
- children: 在IE8及以下， 使用 someElement.children 是包含注释节点的（可以看到nodeType为8是注释节点）
<script>
window.onload = function() {
let box = document.getElementById("box");
let list = document.getElementById("list");
console.log(box.childNodes);
/**
* nodeType 1 元素节点
* 2 属性节点
* 3 文本节点
* */
console.log("个数",box.childNodes.length);
console.log(box.firstChild.nodeType);//3
/**
* 现在我们要取到元素节点--由于换行、空格的存在，所有，上面的nodeType是3
* */
function getFirstEle(ele) {
for(var i=0, e; e=ele.childNodes[i];i++) {
if(e.nodeType === 1) {
return e;
}
}
}
console.log(getFirstEle(box));// span标签
console.log("40行",box.children);// 只返回元素节点
}
</script>
</head>
<body>
<div id="box">
<span>a</span>
121212
</div>
<ul id="list">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
child和childNodes的区别的更多相关文章
- JavaScript中Element与Node的区别，children与childNodes的区别
关于Element跟Node的区别,cilldren跟childNodes的区别很多朋友弄不清楚,本文试图让大家明白这几个概念之间的区别. Node(节点)是DOM层次结构中的任何类型的对象的通用名称 ...
- children 和childNodes 的区别
1:childNodes /children相同点:它返回指定元素的子元素集合. 2:区别:children : 它是非标准的,仅返回HTML节点.甚至不返回文本节点.所有浏览器表现一 致. chi ...
- children和childNodes的区别
children和childNodes 1,childNodes 属性,标准的,它返回指定元素的子元素集合,包括HTML节点,所有属性,文本.可以通过nodeType来判断是哪种类型的节点,只有当no ...
- children和childNodes 的区别
1.childNodes 属性,标准的,它返回指定元素的子元素集合,包括html节点,所有属性,文本.可以通过nodeType来判断是哪种类型的节点,只有当nodeType==时才是元素节点,是属性节 ...
- JavaScript中childNodes和children的区别
我在学习JavaScript对DOM操作的过程中,发现了使用childNodes属性,得不到我想要的结果,因此我就从JavaScript高级程序设计中了解了childNodes和children的区别 ...
- JS中childNodes深入学习
原文:JS中childNodes深入学习 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <ti ...
- js清除childNodes中的#text（选项卡中会用到获取第一级子元素）
我们一般为了代码整洁代码都会换行,如上面所述. 获取div1节点下的childNodes var div = document.getElementById('div1') var child = d ...
- 六天玩转javascript：javascript变量与表达式(2)
本系列内容为本人平时项目实践和参照MDN,MSDN,<javascript语言精粹>,<Effective Javascript>等资料,并且整理自己EverNote的日常积累 ...
- JS学习之路，菜鸟总结的注意事项及错误更正
JavaScript 是一种面向对象的动态语言,它的语法来源于 Java 和 C,所以这两种语言的许多语法特性同样适 用于 JavaScript.需要注意的一个主要区别是 JavaScript 不支持 ...
随机推荐
- C# 5.0新加特性
1. 异步编程 在.Net 4.5中,通过async和await两个关键字,引入了一种新的基于任务的异步编程模型(TAP).在这种方式下,可以通过类似同步方式编写异步代码,极大简化了异步编程模型.如下 ...
- Java入门第一季——从此投身Java？？
找工作告一段落. 最后的工作呢,和java紧密相关,也是阴差阳错,不过都是软件开发,都好了,不过以后侧重点肯定是在java这边,php有机会还是一直学下去的,那么美的说~ Java开发第一季 一.简 ...
- 用apt-get install一个软件的时候出现错误: 无法解析或打开软件包的列表或是状态文件
用apt-get install一个软件的时候出现了一个错误: E: Encountered a section with no Package: header E: Problem with Mer ...
- Elasticsearch学习(一)————简单命令
Elasticsearch一.简介**Elasticsearch 是一个分布式的搜索和分析引擎,可以用于全文检索.结构化检索和分析,并能将这三者结合起来.Elasticsearch 基于 Lucene ...
- iOS runLoop 原理多线程 总结 NSTimer优化
可以理解为字面意思:Run 表示运行,Loop 表示循环.结合在一起就是运行的循环的意思.哈哈,我更愿意翻译为『跑圈』.直观理解就像是不停的跑圈. RunLoop 实际上是一个对象,这个对象在循环中用 ...
- Python笔记12-----画图Matplotlib
1.matplotlib:pyplot和pylab 如: import pylab as pl pl.figure(figsize=(8,6),dpi=100)[建立的图像大小和图的精度] pl.pl ...
- 天使轮 A轮 B轮 上市...等名词解释
看到一篇漫画解释的很形象:
- Webpack 学习记录之概念
1 什么是webpack webpack是一个模块打包器,可以递归的构建一个依赖关系图,其中包含每个程序需要的每个模块,然后将所有模块打包成一个或多个bundle.他和其他的工具最大的不同在于他支持c ...
- Maven 从安装到环境配置到项目搭建
maven是基于项目对象模型(pom),可以通过一小段的描述信息来管理项目的构建,报告和文档的软件项目管理工具. Maven是构建项目的管理工具,白话就是说:“Maven的核心功能便是合理叙述项目间的 ...
- 原生js，一些小应用（逢10进一，生成V字，多个div抖动）
第一题:每隔10个div换一行.并且鼠标移入 改变opacity. <!DOCTYPE html> <html lang="en"> <head> ...