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 不支持 ...
随机推荐
- 11.05 选择前n个记录
select ename,salfrom(select (select count(distinct b.sal)from emp bwhere a.sal<=b.sal) as rnk,a.s ...
- <td colspan="6"></td>代表这个td占6个td的位置
<td colspan="6"><span class="order-time">2017-10-11 14:55:23</spa ...
- spring cloud(一) eureka
spring cloud 注册中心 eureka 搭建过程 1.搭建eureka-server 服务端 1.1. 新建boot工程 pom引入依赖 <dependency> <gro ...
- ubuntu16.04 国内源（网易、阿里）
ubuntu16.04 网易源 deb http://mirrors.163.com/ubuntu/ xenial main restricted universe multiversedeb htt ...
- 小白学习Spark系列二：spark应用打包傻瓜式教程（IntelliJ+maven 和 pycharm+jar）
在做spark项目时,我们常常面临如何在本地将其打包,上传至装有spark服务器上运行的问题.下面是我在项目中尝试的两种方案,也踩了不少坑,两者相比,方案一比较简单,本博客提供的jar包适用于spar ...
- Java 习惯用法总结
转自:http://www.importnew.com/15605.html 首页 所有文章 资讯 Web 架构 基础技术 书籍 教程 我要投稿 更多频道 » Java 习惯用法总结 2015/04/ ...
- luogu 3768 简单的数学题 (莫比乌斯反演+杜教筛)
题目大意:略 洛谷传送门 杜教筛入门题? 以下都是常规套路的变形,不再过多解释 $\sum\limits_{i=1}^{N}\sum\limits_{j=1}^{N}ijgcd(i,j)$ $\sum ...
- 实现路由器自动登录校园网(edu)
准备工作: (1)一个可以刷openwrt固件的路由器,如大多人使用的crazybox版本的路由. (2)一个可用的edu账号. (3)一个浏览器(firfox,chrome) 下面开始: 一:刷op ...
- VLC编译
http://blog.csdn.net/hdh4638/article/details/7602321 1 下载代码 ki.videolan.org/VLC_Source_code git colo ...
- Mysql学习总结（36）——Mysql查询优化
从事前端开发的都知道,页面显示的数据一定要及时的呈现,否则会影响用户体现.那么导致页面加载数据慢或者显示滞后的原因又是什么呢? 拿自己之前做项目经历给大家讲讲吧,之前做后台,当时的项目实时性都非常高, ...