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. Kafka学习笔记（6）----Kafka使用Producer发送消息

    1. Kafka的Producer 不论将kafka作为什么样的用途,都少不了的向Broker发送数据或接受数据,Producer就是用于向Kafka发送数据.如下: 2. 添加依赖 pom.xml文 ...

  2. PhotoZoom放大图片，真的能无损吗？

    当然想要无损放大一张很小的图片时,总会有人会和你推荐PhotoZoom这款软件,那么它真的和说的一样,可以无损放大吗?下面小编挑了2张图片做了一下对比. 案例1,我们选取一张尺寸为200x200像素的 ...

  3. mac上安装flask详细步骤

    1  在终端输入 macdeMac-mini-62:~ mac$ sudo easy_install pip 2 macdeMac-mini-62:~ mac$ sudo pip install fl ...

  4. 基于fullpage的自动播放，手动播放，暂停页面的功能

    功能如下: 1.默认加载方式为“自动播放 ”方式,即从第1屏至第5屏 页面循环加载显示,每屏每次仅显示1个页面,页面间停留时间为“10”秒2.手动播放过程中,按数字键“1”-“5”,将直接切到指定页面 ...

  5. js给文本添加行号

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  6. 10分钟 PySimpleGUI 图形界面入门

    import PySimpleGUI as sg layout = [ [sg.Text('Enter a Number')], [sg.Input()], [sg.OK()] ] event,(nu ...

  7. tomcat-manager 设置

    tomcat默认是没有用户登录控制的,需要登录manager,则需要配置角色与用户 1. 在conf/tomcat-users.xml中添加 <role rolename="manag ...

  8. WEBGL学习【六】动起来的三棱锥和立方体

    <html lang="zh-CN"> <!--服务器运行地址:http://127.0.0.1:8080/webgl/LearnNeHeWebGL/NeHeWe ...

  9. 【转】H5 input search 提交事件

    欲实现一个文字搜索的功能,要求输入时,键盘回车按钮提示显示为“搜索”.效果如下: 开始~ input type=text并不能达到这种效果,google了一下,HTML5 增加的type=search ...

  10. Python 使用matplotlib模块模拟掷骰子

    掷骰子 骰子类 # die.py 骰子类模块 from random import randint class Die(): """骰子类""&quo ...