JavaScript使用childNodes和children
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的更多相关文章
- JavaScript中childNodes和children的区别
我在学习JavaScript对DOM操作的过程中,发现了使用childNodes属性,得不到我想要的结果,因此我就从JavaScript高级程序设计中了解了childNodes和children的区别 ...
- Javascript 中childNodes和children的区别
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- JavaScript中childNodes、children、nodeValue、nodeType、parentNode、nextSibling详细讲解
其中属性.元素(标签).文本都属于节点 <title></title> <scripttype="text/javascript"> windo ...
- javascript中childNodes与children的区别
1.childNodes:获取节点,不同浏览器表现不同: IE:只获取元素节点: 非IE:获取元素节点与文本节点: 解决方案:if(childNode.nodeName=="#text&qu ...
- js表单验证处理和childNodes 和children 的区别
一.对提交表单进行空值验证 html代码: <form action="#"onsubmit="return validate_form(this);" ...
- parentNode、parentElement，childNodes、children 它们有什么区别呢？
parentNode.parentElement,childNodes.children 它们有什么区别呢?parentElement 获取对象层次中的父对象. parentNode 获取文档层次中的 ...
- js下firstElementChild firstChild 以及childNodes和children方法
一. <div> <p>123</p> </div> 在上面这段代码中,如果使用以下js代码 var oDiv=document.getElementB ...
- childNodes和children
childNodes 返回指定元素的子节点集合,包括HTML节点,所有文本(元素之间的空格换行childNodes会看作文本节点). 通过nodeType来判断节点的类型: 元素 1 属性 2 文本 ...
- Javascript DOM基础（二） childNodes、children
childNodes知识点: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Typ ...
随机推荐
- poi对excel的基本读写操作
最近简单的弄了下poi对excel的应用,为方便自己以后的使用就把一些基本操作记录下来,其他更复杂的操作可以等以后有需求的时候再来深入了解一番! 写操作: /** * * 层次结构就是workbook ...
- day14 Python函数
函数def,严格来讲有个return返回值 过程就是没有return返回值的函数 #过程 def test01(): msg = 'liuhaoran' print(msg) #函数 def test ...
- squid调整
Squid采用新方案部署的调整步骤一,隔离二,修改三,验证四,波及==============================[1] 把被引用到的待修改对像实例,从前端应用负载nginx的配置中摘出 ...
- Linux Kernel 4.21已更新：优化AMD 7nm Zen2架构
导读 AMD 7nm Zen2处理器预计将于明年第一季推出,采用下一代7nm EPYC. Linux Kernel 4.21已经更新,以优化AMD 7nm EPYC Rome(罗马)处理器. AMD ...
- POJ2387（dijkstra堆优化）
Til the Cows Come Home Bessie is out in the field and wants to get back to the barn to get as much s ...
- python 3.6练习题(仿购物车)
opop = [ ('Iphone', 9800), ('Bike', 800), ('Mac Pro', 12000), #定义商品列表 ('Pyhon book', 120), ('Telas', ...
- Selenium：三种等待方式
UI自动化测试,大多都是通过定位页面元素来模拟实际的生产场景操作.但在编写自动化测试脚本中,经常出现元素定位不到的情况,究其原因,无非两种情况:1.有frame:2.没有设置等待. 因为代码运行速度和 ...
- 通过socket获取图片并保存
网络操作的相关API gethostbyname/gethostbyaddr/getservbyname struct hostent *gethostbyname(const char *name) ...
- arm那些事
ARM简介 ARM的商业模式: ARM只负责设计IC,并且出卖自己的设计IP(版权). ARM自己不生产芯片,而是把设计IP授权给其他半导体厂商来生产芯片. 严格地说,ARM并不是一家半导体厂商. ...
- sql server使用的相关基础知识
1.表的管理--表和列的命名 必须以字母开头 长度不能超过128字符 不要使用sql server的保留字 只能使用如下字符A-Z,a-z,0-9,$,#,_等等 2.表的管理--支持的数据类型 字符 ...