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. Component name与package name/class name的关系？

    谢谢,那就是component name是package name + activity name?那class name呢?是.java中定义的class MyClass ???

  2. js如何获得局部变量的值

    方法一: <script> var a; //全局变量 function test(){ var b=20; //局部变量   return b; //返回局部变量的值 }; a=test ...

  3. Color the ball HDU - 1556 （非线段树做法）

    题意:在1到n的气球中,在不同的区域中涂颜色,问每个气球涂几次. #include<cstdio>int num[100010];int main(){ int n, x, y;; whi ...

  4. dd测试

    time dd if=/dev/zero of=/root/test.db2 bs=200K count=10000 oflag=dsync

  5. Python3 环境搭建

    Window 平台安装 Python: 以下为在 Window 平台上安装 Python 的简单步骤. 打开 WEB 浏览器访问 https://www.python.org/downloads/wi ...

  6. linux shell脚本调用java main方法 代码

    #!/bin/sh # #该脚本为Linux下启动java程序的通用脚本.即可以作为开机自启动service脚本被调用, #也可以作为启动java程序的独立脚本来使用. # #Author: tuda ...

  7. FreeRTOS学习笔记--任务优先级

    FreeRTOSConfig.h 中的常量configMAX_PRIORITIES的值就是任务优先级的最大数值,这个数值可以按照自己的需要改动,当然值越大,内核对内存的开销就越大,一般设置一个满足自己 ...

  8. QT显示url图片

    QT 显示网络图片我目前的办法就是先下载下来 然后显示  如果有好的办法请相互交流一下 需要调用的头文件 #include <QNetworkAccessManager> #include ...

  9. Ubuntu下 AndroidStudio 无法识别设备的问题

    最近想搞一下 Android的软件开发 于是下决心,开始研究ubuntu 环境下android studio 的配置.对于我这个对APP一无所知的技术小白,还是遇到很多的问题. 1.先拔掉数据线,按下 ...

  10. JSON构造/解析（by C）---cJSON和json-c

    背景 JSON即JavaScript Object Notation,是一种轻量级的数据交换格式. JSON建构于两种结构: "名称/值"对的集合(A collection of ...