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. Java入门第一季——从此投身Java？？

    找工作告一段落. 最后的工作呢,和java紧密相关,也是阴差阳错,不过都是软件开发,都好了,不过以后侧重点肯定是在java这边,php有机会还是一直学下去的,那么美的说~ Java开发第一季  一.简 ...

  2. 我的C++笔记(类与对象）

    /* * Main.cpp * * Created on: 2015-7-24 * Author: feiruo */ /* * 类与对象: * * 1.抽象: * 面向对象方法中的抽象,是指对具体问 ...

  3. 读书笔记「Python编程：从入门到实践」_3.列表简介

    3.1 列表是什么 列表 由一系列按特定顺序排列的元素组成. 在Python中,用方括号([] )来表示列表,并用逗号来分隔其中的元素. 3.1.1 访问列表元素 指出列表的名称,再指出元素的索引   ...

  4. strusts2_json

    引用别人的 Struts.xml <package name="default" extends ="json-default" > <act ...

  5. Python 安装 numpy 以及 matplotlib 的过程

    系统:ubuntu 16.04 版本:Python3.5 步骤: 安装 pip sudo apt install python3-pip 查看 pip list 是否有 numpy 以及 matplo ...

  6. mplayer configure选项中文注释

    mplayer configure选项中文注释(MPlayer-1.0rc2) http://blogold.chinaunix.net/u3/104581/showart_2322466.html ...

  7. vue-cli快速搭建

    vue-cli是用于开发大型vue项目的脚手架工具,使用vue-cli搭建好平台后,只需要关注程序的开发,不用过多的花时间去思考文件配置的问题 当然,还是可以任意进行自定义配置,官方地址:vue-cl ...

  8. 【Educational Codeforces Round 48 (Rated for Div. 2) C】 Vasya And The Mushrooms

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 显然在没有一直往右走然后走到头再往上走一格再往左走到头之前. 肯定是一直在蛇形走位.. 这个蛇形走位的答案贡献可以预处理出来.很容易 ...

  9. jQuery练习总结(二)

    --------------------------------------- <!DOCTYPE html> <!DOCTYPE HTML PUBLIC "-//W3C/ ...

  10. windowbuilder01 按钮事件监听