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. oracle语句insert into select如何加后续插入条件

    oracle语句insert into select如何加后续插入条件 2014-01-21 10:48匿名  分类:其他编程语言 | 浏览 2746 次 oracle中有批量插入语句insert i ...

  2. swift class的虚函数表、扩展、@objc修饰、虚函数的派发方式研究

    swift class的虚函数表.扩展.@objc修饰的研究 工具: swiftc -emit-sil BaseClass.swift | xcrun swift-demangle > Clas ...

  3. 转://Linux MultiPath多路径软件实施说明

    Multipath的工作原理 当multipath启动的时候,它通过系统命令scsi_id -eg -s /block/sdX得到proc/partitions 里面所有块设备的 UUID(unive ...

  4. PLSQL Developer12连接远程Oracle xe 11g

    目标: .学习使用docker下载oracle xe 11g .使用PLSQL连上启动运行oracle xe 11g容器服务 1.准备工作 Linux 安装docker 下载PLSQL Develop ...

  5. wifi 安卓手机

    通过wifi向服务器端发送数据 https://www.cnblogs.com/zhaoxinshanwei/p/3573813.html http://www.hx-wl.com.cn/51wifi ...

  6. Java不定参数Object… obj 和 Object[] 的区别

    Java不定参数Object… obj 和 Object[] 的区别 简述: java中方法重载可以实现参数不同自动匹配对应方法.但现实中也存在这种问题.普通传参对于形如下面的方法,却显得臃肿而失优雅 ...

  7. 一加将在欧洲推出第一款商用 5G 手机

    远在太平洋中部的夏威夷群岛,高通举办了骁龙峰会. 峰会的惯例,各行业的合作伙伴都被邀请上台演讲.中国企业里,去年来的是小米雷军,而今年刚开场,一加手机 CEO 刘作虎就现身了. 与以往一样,张老板身着 ...

  8. 小程序 获取微信小程序的源码

    1.微信小程序是以wxapkg可执行文件的形式存在本地的 2.网上有工具可以把wxapkg文件还原成源代码: https://github.com/qwerty472123/wxappUnpacker ...

  9. Android学习之基础知识六—Android四种布局详解

    一.Android基本布局 布局是一种可以放置多个控件的容器,它可以按照一定规律调整内部控件的位置,而且布局内部除了可以放置控件外,还可以放置布局,实现多层布局嵌套.布局和控件.布局和布局之间的关系如 ...

  10. GIT 分支管理:分支管理策略、Bug分支、Feature分支

    通常,合并分支时,如果可能,Git会用Fast forward模式,但这种模式下,删除分支后,会丢掉分支信息. 如果要强制禁用Fast forward模式,Git就会在merge时生成一个新的comm ...