childNodes用来获取一个元素的所有子元素，这个包括元素节点和文本节点。

　　children用来获取一个元素的子元素节点，注意只是元素节点

其中DOM中常见的三种节点分别如下：

　　元素节点：<body>，<p>，<a>，<div>，<head>.....等等这些标签，都是元素节点

　　属性节点：title，value，href，id，class等等这些标签的属性，都是属性节点

　　文本节点：文本节点是包含在在标签之内的内容（双标签）比如<p>this is text node</p>，中间的文字就是文本节点；注意包含在标签中间的不一定是文本节点，比如<div><p></p></div>当中的<p>是元素节点

　　所以在使用childNodes来获取到一个元素的子元素集合，这是一个数组。

　　其中最常用的是通过childNodes获得的对象数组中，第一个子元素对象（也即下标为0），这个元素是text，即文本节点，也可以使用firstChild来替代childNodes[0]，然后通过nodeValue属性来获取text的值。

　　如果在标签之中只有一个文本节点，而没有其他元素节点时，也可以使用innerHTML来获取这个节点的文本内容。

具体的用法如下：

<body>

	<div id="test">

		this is test

		<p>this is other test</p>

	</div>

</body>

<script>

	var div = document.getElementById("test");

	alert(div.childNodes.length);        //显示3

	alert(div.childNodes[0]);	//[object Text]

	alert(div.childNodes[0].nodeValue);   //显示this is test

	//等价

	alert(div.firstChild.nodeValue);      //显示this is test

	alert(div.childNodes[1]);	//[object HTMLParagraphElement]

	alert(div.childNodes[1].childNodes[0].nodeValue); //this is other test

	//等价

	alert(div.childNodes[1].firstChild.nodeValue); //this is other test

	//p标签中无其他节点，可以使用innderHTML

	alert(div.childNodes[1].innerHTML);  ////this is other test

</script>

　　

　　

JavaScript使用childNodes和children的更多相关文章

  1. JavaScript中childNodes和children的区别

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

  2. Javascript 中childNodes和children的区别

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  3. JavaScript中childNodes、children、nodeValue、nodeType、parentNode、nextSibling详细讲解

    其中属性.元素(标签).文本都属于节点 <title></title> <scripttype="text/javascript"> windo ...

  4. javascript中childNodes与children的区别

    1.childNodes:获取节点,不同浏览器表现不同: IE:只获取元素节点: 非IE:获取元素节点与文本节点: 解决方案:if(childNode.nodeName=="#text&qu ...

  5. js表单验证处理和childNodes 和children 的区别

    一.对提交表单进行空值验证 html代码: <form action="#"onsubmit="return validate_form(this);" ...

  6. parentNode、parentElement，childNodes、children 它们有什么区别呢？

    parentNode.parentElement,childNodes.children 它们有什么区别呢?parentElement 获取对象层次中的父对象. parentNode 获取文档层次中的 ...

  7. js下firstElementChild firstChild 以及childNodes和children方法

    一. <div> <p>123</p> </div> 在上面这段代码中,如果使用以下js代码 var oDiv=document.getElementB ...

  8. childNodes和children

    childNodes 返回指定元素的子节点集合,包括HTML节点,所有文本(元素之间的空格换行childNodes会看作文本节点). 通过nodeType来判断节点的类型: 元素 1 属性 2 文本 ...

  9. Javascript DOM基础（二） childNodes、children

    childNodes知识点: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Typ ...

随机推荐

  1. 紧急整理了 20 道 Spring Boot 面试题，我经常拿来面试别人！

    面试了一些人,简历上都说自己熟悉 Spring Boot, 或者说正在学习 Spring Boot,一问他们时,都只停留在简单的使用阶段,很多东西都不清楚,也让我对面试者大失所望. 下面,我给大家总结 ...

  2. FusionCharts参数说明——3D饼图属性(Pie3D.swf )

    animation 是否显示加载图表时的动画palette 内置的图表样式,共5个paletteColors 自定义图表元素颜色(为多个,如过过少会重复)showAboutMenuItem 右键是否显 ...

  3. python五十七课——正则表达式（元字符）

    1).匹配单个字符(数字.英文.其它) 符号位: []:表示一个字符位 [0123456789]:表示一位,取值范围:[0,9]之间的任何一个值 [0-9]:表示一位,取值范围:[0,9]之间的任何一 ...

  4. EJB3.0中的session bean以及MDB解析

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/aboy123/article/details/24587133 大型业务系统面临的主要问题就是高并发 ...

  5. ROS教程1 消息查看和使用服务

    消息动态图 rqt_graph能够创建一个显示当前系统运行情况的动态图形. rosrun rqt_graph rqt_graph 如果你将鼠标放在/turtle1/command_velocity上方 ...

  6. AI 概率论

    概率论 不确定性 量化 频率 频率派 贝叶斯派 1.随机变量(random variable) 随机取不同值的变量,取值可以离散或者连续. 2.概率分布(probability distributio ...

  7. 【Codeforces 86C】Genetic engineering

    Codeforces 86 C 题意:给\(m\)个串,要构造长度为\(n\)的串,而且必须由这些模式串们覆盖(可以重复),问可以构造多少种. 思路:首先构造AC自动机,然后\(dp(i,j,k)\) ...

  8. Linux运维故障排查思路

    linux系统故障 网络问题 linux系统无响应 linux系统无法启动 linux系统故障处理思路 1.重视报错信息,一般情况下此提示基本定位了问题的所在 2.查阅日志文件,系统日志和应用日志 3 ...

  9. pycharm 取消 rebase 操作

    291/5000 取消rebase操作从主菜单中选择VCS | Git | 中止重新定位(abrot rebasing)如果rebase在两个或多个本地存储库中启动,则会显示“中止重新排序”对话框. ...

  10. CF1070L Odd Federalization 高斯消元

    传送门 \(r = 1\)直接判断所有点度数是否为偶数 考虑\(r = 2\)的情况.设\(x_i=0/1\)表示\(i\)点所在的集合,那么若\(2 \mid du_u\),则\(\bigoplus ...