childNodes简单解析
定义和用法
childNodes 属性返回节点的子节点集合,以 NodeList 对象。
提示:您可以使用 length 属性来确定子节点的数量,然后您就能够遍历所有的子节点并提取您需要的信息。
浏览器支持
所有主流浏览器都支持 childNodes 属性。
语法
element.childNodes
技术细节
返回值: NodeList 对象,表示节点集合。
DOM 版本 Core Level 1
以上是定义来着w3cschool.com
DOM中节点的类型
DOM中一共有12中类型。但是我们常用的只有几种。
首先我们了解下DOM中一般常见的节点类型有哪些?
1、元素节点
DOM中的原子都是元素节点,比如
body table div
等等。
如果把Web上的文档比作一座大厦,则元素就是构成这块大厦的砖石。一个文档是由N个元素组成的。元素可包含其他元素。
2、文本节点
任意的文字、空格、换行、空白行都算是文本节点。
3、属性节点
属性节点,故名思议就是其他节点的属性。例如所有的元素都有title属性,在title='title1’就是一个属性节点。
4、注释节点
就是注释了。
childNodes包含了哪些节点?
由childNodes属性返回的数组中包含着所有类型的节点,所有的属性节点和文本节点也包含在其中。(这一点存在疑问,下面有解释)
事实上,文档里几乎每一样东西都是一个节点,甚至连空格和换行符都会被解释成节点。而且都包含在childNodes属性所返回的数组中。
chidNoeds返回的事node的集合,
每个node都包含有nodeType属性。
nodeType取值:
元素节点:1
属性节点:2
文本节点:3
注释节点:8
测试
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title><script>window.onload = function () {console.log("body的childNodes");var oItems = document.body.childNodes;for (var i = 0; i < oItems.length; i++) {console.log("nodeType:" + oItems[i].nodeType);console.log("nodeName:" + oItems[i].nodeName);console.log("nodeValue:'" + oItems[i].nodeValue + "'");}console.log("h1的childNodes");getChildNodesAtrr(document.getElementsByTagName("h1")[0]);console.log("span的childNodes");getChildNodesAtrr(document.getElementsByTagName("span")[0]);console.log("div的childNodes");getChildNodesAtrr(document.getElementsByTagName("div")[0]);};function getChildNodesAtrr(dom) {var oItems = dom.childNodes;for (var i = 0; i < oItems.length; i++) {console.log("nodeType:" + oItems[i].nodeType);console.log("nodeName:" + oItems[i].nodeName);console.log("nodeValue:'" + oItems[i].nodeValue + "'");}}</script>
</head>
<body><h1>h1</h1><span>span</span><!--这是一个注释-->123<div class="class1" title="title1"></div>
</body>
</html>
最终控制台的输出结果:
body的childNodes
nodeType:3
nodeName:#text
nodeValue:’
’
nodeType:1
nodeName:H1
nodeValue:‘null’
nodeType:3
nodeName:#text
nodeValue:’
’
nodeType:1
nodeName:SPAN
nodeValue:‘null’
nodeType:3
nodeName:#text
nodeValue:’
’
nodeType:8
nodeName:#comment
nodeValue:‘这是一个注释’
nodeType:3
nodeName:#text
nodeValue:’
123
’
nodeType:1
nodeName:DIV
nodeValue:‘null’
nodeType:3
nodeName:#text
nodeValue:’
’
h1的childNodes
nodeType:3
nodeName:#text
nodeValue:‘h1’
span的childNodes
nodeType:3
nodeName:#text
nodeValue:‘span’
div的childNodes
结果分析
1、分析结果,其中可以发现
nodeValue:’
123
’
这个其实是nodeValue:\n123\n,加引号只是为了能看出换行效果。
这说明空格和换行符确实被当成一个文本接单
2、元素包含文字时,元素节点本身的nodevalue是null,而它包含的文字成为了一个独立的文本节点,这个文本节点的nodeValue才是我们之前设置的值。上例中的H1和SPAN都是这样的,childNodes的长度为1。而div因为没有内容所以div的childNodes的长度为0。
3、没有发现有nodeType为2的节点类型
总结
在使用原生的childNodes时,包括提供的nodeValue,firstChild(),lastChild()等等。都需要注意其他元素类型的影响,因为我们通常操作的都是元素节点。而childNodes返回的集合中包含了很多意向不到的东西,在实际使用中和容易造成错误。
所以建议在使用childNodes时,最好通过nodeType将返回集合过滤一遍再进行使用,能够避免很多不必要的问题。
childNodes简单解析相关推荐
- 插件化框架DL源码的简单解析
目前行业内已经有较多的插件化实现方案.本文主要对DL(DynamicLoadApk)这一个开源的侵入式插件化方案进行简单分析.因为Service组件插件化的实现逻辑和Activity大体相似,所以在这 ...
- java 解析xls 文件_java简单解析xls文件的方法示例【读取和写入】
本文实例讲述了java简单解析xls文件的方法.分享给大家供大家参考,具体如下: 读取: import java.io.*; import jxl.*; import jxl.write.*; imp ...
- [ 转载 ] Java基础10--关于Object类下所有方法的简单解析
关于Object类下所有方法的简单解析 类Object是类层次结构的根类,是每一个类的父类,所有的对象包括数组,String,Integer等包装类,所以了解Object是很有必要的,话不多说,我们直 ...
- java在线打开xml文件_java实现简单解析XML文件功能示例
本文实例讲述了java实现简单解析XML文件功能.分享给大家供大家参考,具体如下: package demo; import java.io.File; import java.io.IOExcept ...
- java:AXIS调用webService接口,返回String类型xml,并用dom4j简单解析xml
一.使用axis调用webService接口,返回String类型xml 1.导入axis依赖 2.直接贴代码 /*** 调用webservice接口的方法,并返回String类型的xml* @par ...
- HTML-HTML协议简单解析
HTML-HTML协议简单解析 在浏览器访问一个地址: 127.0.0.1:7890/html/html.htm //代表访问当地服务器路径下的/html的html.htm文件 客户端发送的请求命令是 ...
- C++生成LNK文件及LNK文件简单解析
C++生成LNK文件及LNK文件简单解析 话不多说,直接上代码吧. 生成快捷方式代码: int CreateLnk(const wchar_t* TARGET, const wchar_t* LNKF ...
- 大数据培训课程数据清洗案例实操-简单解析版
数据清洗(ETL) 在运行核心业务MapReduce程序之前,往往要先对数据进行清洗,清理掉不符合用户要求的数据.清理的过程往往只需要运行Mapper程序,不需要运行Reduce程序.大数据培训 数据 ...
- 邻近算法(KNN)原理简单解析
邻近算法(KNN)原理简单解析 一.什么是邻近算法 1.1简介 1.2核心思想 1.3 算法流程 1.4 优缺点 二.实例演示KNN算法 一.什么是邻近算法 1.1简介 邻近算法,或者说K最近邻(KN ...
最新文章
- 一口气说出 6 种 @Transactional 注解的失效场景
- 15.Result配置详解
- serverless mysql_Serverless 解惑——函数计算如何访问 MySQL 数据库
- python打完代码怎么运行-Python的代码是如何去进行运行的?
- CMS(Concurrent Mark-Sweep)垃圾回收器
- HDU5833 异或方程组的初步学习
- Spring依赖注入DI
- js定位div坐标存入mysql_js实现获取div坐标的方法
- echart重新加载数据_在asp.net core中动态加载最新的配置信息
- 有意义的100个小故事
- lfs库下载_lua使用lfs.dll库进行文件操作
- NMT:神经网络机器翻译
- 单片机数字电路-protues之74HC573演示
- 新建的web项目为什么默认访问index.jsp
- 爱她就送ta一场樱花雨
- 气候变化对深圳的影响
- stream銆俠oxed_电脑关机时显示OX100672ed指令引用的OX0000000C内存,该内存不能为written是什么意思...
- 用计算机画画内容,用计算机画画的教案
- 传输速率、带宽、吞吐量
- 习题3-4 统计学生成绩(15 分)