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. ESLint 规范项目代码

    ESLint 由 JavaScript 红宝书 作者 Nicholas C. Zakas 编写, 2013 年发布第一个版本. NCZ 以可扩展.每条规则独立.不内置编码风格为理念编写了一个 lint ...

  2. 01--[转]C++强大背后

    [转]C++强大背后 2014-01-22 分类:互联网 阅读(9295) 评论(6) 在31年前(1979年),一名刚获得博士学位的研究员,为了开发一个软件项目发明了一门新编程语言,该研究员名为Bj ...

  3. 前端开发app

    1.如果是 Angular 那就选 Ionic (一对好 CP) 2.如果是 Vue 那就选 Vux (基于 WeUI)3.如果是 jQuery 那就选 Framework7 (iOS 和 Andro ...

  4. scrapy 动态网页处理——爬取鼠绘海贼王最新漫画

    简介 scrapy是基于python的爬虫框架,易于学习与使用.本篇文章主要介绍如何使用scrapy爬取鼠绘漫画网海贼王最新一集的漫画. 源码参见:https://github.com/liudaol ...

  5. mongoDB authentication

    转自:http://blog.csdn.net/allen_jinjie/article/details/9235073 1. 最开始的时候,我们启动mongodb,但是不包含--auth参数: E: ...

  6. [SDOI2018]战略游戏（圆方树+虚树）

    喜闻乐见的圆方树+虚树 图上不好做,先建出圆方树. 然后答案就是没被选到的且至少有两条边可以走到被选中的点的圆点的数量. 语文不好,但结论画画图即可得出. 然后套路建出虚树. 发现在虚树上DP可以得出 ...

  7. nyoj252-01串

    01串 时间限制:1000 ms  |  内存限制:65535 KB 难度:2 描述 ACM的zyc在研究01串,他知道某一01串的长度,但他想知道不含有"11"子串的这种长度的0 ...

  8. Ubuntu环境搭建svn服务器

    记录一次使用Ubuntu环境搭建svn服务器的详细步骤 一.查看是否已经安装svn 命令:svn如果显示以下信息,说明已安装   二.卸载已安装的svn 命令:sudo apt-get remove ...

  9. select Option(增加，删除，清空)

    jQuery获取Select选择的Text和Value: $("#select_id").change(function(){//code...}); //为Select添加事件, ...

  10. wifi共享精灵2014.04.25.001已经更新，wifi热点中文名走起！

    五一回来后,有个惊喜,wifi共享精灵有了最新动向.不晓得wifi共享精灵是啥的朋友,我来解释下,它就相当于一个无线路由器.说起来,Wifi共享精灵正式版2014.04.25.001(http://w ...