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的区别的更多相关文章

  1. JavaScript中Element与Node的区别，children与childNodes的区别

    关于Element跟Node的区别,cilldren跟childNodes的区别很多朋友弄不清楚,本文试图让大家明白这几个概念之间的区别. Node(节点)是DOM层次结构中的任何类型的对象的通用名称 ...

  2. children 和childNodes 的区别

    1:childNodes /children相同点:它返回指定元素的子元素集合. 2:区别:children :  它是非标准的,仅返回HTML节点.甚至不返回文本节点.所有浏览器表现一 致. chi ...

  3. children和childNodes的区别

    children和childNodes 1,childNodes 属性,标准的,它返回指定元素的子元素集合,包括HTML节点,所有属性,文本.可以通过nodeType来判断是哪种类型的节点,只有当no ...

  4. children和childNodes 的区别

    1.childNodes 属性,标准的,它返回指定元素的子元素集合,包括html节点,所有属性,文本.可以通过nodeType来判断是哪种类型的节点,只有当nodeType==时才是元素节点,是属性节 ...

  5. JavaScript中childNodes和children的区别

    我在学习JavaScript对DOM操作的过程中,发现了使用childNodes属性,得不到我想要的结果,因此我就从JavaScript高级程序设计中了解了childNodes和children的区别 ...

  6. JS中childNodes深入学习

    原文:JS中childNodes深入学习 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <ti ...

  7. js清除childNodes中的#text（选项卡中会用到获取第一级子元素）

    我们一般为了代码整洁代码都会换行,如上面所述. 获取div1节点下的childNodes var div = document.getElementById('div1') var child = d ...

  8. 六天玩转javascript：javascript变量与表达式(2)

    本系列内容为本人平时项目实践和参照MDN,MSDN,<javascript语言精粹>,<Effective Javascript>等资料,并且整理自己EverNote的日常积累 ...

  9. JS学习之路，菜鸟总结的注意事项及错误更正

    JavaScript 是一种面向对象的动态语言,它的语法来源于 Java 和 C,所以这两种语言的许多语法特性同样适 用于 JavaScript.需要注意的一个主要区别是 JavaScript 不支持 ...

随机推荐

  1. C#自定义控件实现控件随窗口大小改变

    1.新建用户控件,取名MyForm. 2.将默认的UserControl改成Form 3.在类中添加以下代码 private float X, Y; //获得控件的长度.宽度.位置.字体大小的数据 p ...

  2. apache出现You don't have permission to access / on this server提示的解决方法

    在apache的配置文件httpd.conf里定义了对网站根默认的访问权限 #<Directory />    Options FollowSymLinks    AllowOverrid ...

  3. Ubuntu14.04引导菜单修复

    原文链接:http://www.metsky.com/archives/636.html 独立分区下的Ubuntu引导菜单修复有点麻烦,执行挂载等命令时要小心检查,修复此类引导,首先需要确保当前系统和 ...

  4. Cython入门.VS.C++

    原文链接:http://blog.csdn.net/gzlaiyonghao/article/details/4561611 作者:perrygeo 译者:赖勇浩(http://laiyonghao. ...

  5. Embeding如何理解？

    参考: http://www.sohu.com/a/206922947_390227 https://zhuanlan.zhihu.com/p/27830489 https://www.jianshu ...

  6. matlab学习创建变量定义函数

    定义变量a,b,c,计算输出d >> a=-3;b=2;c=5;>> d=(a^2+b)/c;>> d=(a^2+b)/c d = 2.2000 系统默认变量  a ...

  7. vue学习笔记——脚手架安装

    项目启动:npm run build 脚手架 vue cli vue cli --2 安装命令 #全局安装 npm install --global vue-cli #卸载vue-cli  npm u ...

  8. ASP.NET MVC5 ：Attribute路由使用详解

    1.什么是Attribute路由?怎么样启用Attribute路由? 微软在 ASP.NET MVC5 中引入了一种新型路由:Attribute路由,顾名思义,Attribute路由是通过Attrib ...

  9. redis 五大数据类型

    一.String set : 添加数据 get : 获得指定 key 的 value del : 删除指定 key append : 往字符串后面添加       append k1 12345    ...

  10. 洛谷 1119 灾后重建 Floyd

    比较有趣的Floyd,刚开始还真没看出来....(下午脑子不太清醒) 先考虑一下Floyd本身的实现原理, for(k=1;k<=n;k++) for(i=1;i<=n;i++) for( ...