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. apache出现You don't have permission to access / on this server提示的解决方法

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

  2. Linux终端 Tab 补全命令

    1. vi编辑器打开 /etc/bash.bashrc文件 vi /etc/bash.bashrc 2.找到文件中的下列代码 3.将注释符号#去掉,即改成 4.最后 source一下 /etc/bas ...

  3. 路飞学城Python-Day180

    部署作业 [pythonanywhere]

  4. MySQL笔记5-----索引（覆盖索引等）

    1.概念: 覆盖索引:(个人理解)就是包含所有查询记录的索引.当查询量过大时可以采用覆盖索引来进行查询,效率较高. 回表:建立覆盖索引就是避免回表,回表效率会很慢. select查询的字段只有索引列, ...

  5. js中浏览器兼容startsWith 、endsWith 函数

    在做js开发的时候用到了startsWith函数时,发现各个浏览器不兼容问题,因为对开发来说,chrome浏览器最好用,就一直在chrome浏览器中使用这两个函数没有任何问题,但在ie浏览器访问就直接 ...

  6. Linux Shell脚本编程-基础1

    概述:  shell脚本在Linux系统管理员的运维工作中非常重要.shell脚本能够帮助我们很方便的管理服务器,因为我们可以指定一个任务计划,定时的去执行某一个脚本以满足我们的需求.本篇将从编程基础 ...

  7. [转载]解决/usr/bin/ld: cannot find -lxxx

    在linux环境编译应用程式或lib的source code时常常会出现如下的错误讯息: /usr/bin/ld: cannot find -lxxx 这些讯息会随着编译不同类型的source cod ...

  8. ie7 text-indent input影响

    IE6/IE7中text-indent对input背景的影响 在text-indent在IE6/IE7中的位置偏移BUG一文中讨论过IE6/IE7中inline-block元素设置text-inden ...

  9. 洛谷——P2440 木材加工

    https://www.luogu.org/problem/show?pid=2440#sub 题目背景 要保护环境 题目描述 题目描述: 木材厂有一些原木,现在想把这些木头切割成一些长度相同的小段木 ...

  10. Grand Central Dispatch(GCD)详解

    概述 GCD是苹果异步执行任务技术,将应用程序中的线程管理的代码在系统级中实现.开发者只需要定义想要执行的任务并追加到适当的Dispatch Queue中,GCD就能生成必要的线程并计划执行任务.由于 ...