js中childNodes为什么输出#text:childNodes详解
转载原创地址:http://www.cnblogs.com/Jersen/p/4908943.html
定义和用法
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
测试
![](/assets/blank.gif)
<!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>
![](/assets/blank.gif)
最终控制台的输出结果:
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将返回集合过滤一遍再进行使用,能够避免很多不必要的问题。
js中childNodes为什么输出#text:childNodes详解相关推荐
- python怎么横着输出_对python3中, print横向输出的方法详解
对python3中, print横向输出的方法详解 Python 2 : print打印的时候,如果结尾有逗号,打出来时候不会换行.但是在python3里面就不行了. Python3: 3.0的pri ...
- js中自己实现bind方法及详解
1. 详细代码如下: if (!Function.prototype.bind) {Function.prototype.bind = function () {var self = this, // ...
- Js中String对象方法replace()用法详解
replace() 方法用于在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子串. 语法 stringObject.replace(regexp/substr,replacement) ...
- php正则匹配js中变量_PHP正则表达式核心技术完全详解 第12节 [附加知识] 断言匹配...
作者:极客小俊 一个专注于web技术的80后 我不用拼过聪明人,我只需要拼过那些懒人 我就一定会超越大部分人! 极客小俊@知乎,官方首发原创文章 博客: 极客小俊GeekerJun PHP正则中的断言 ...
- JS中的事件委托/事件代理详解
起因: 1.这是前端面试的经典题型,要去找工作的小伙伴看看还是有帮助的: 2.其实我一直都没弄明白,写这个一是为了备忘,二是给其他的知其然不知其所以然的小伙伴们以参考: 概述: 那什么叫事件委托呢?它 ...
- JS中arguments对象的属性-callee详解
callee则不是函数对象的属性,它是函数上下文中arguments对象的属性 function func() {alert(arguments.callee); } 它引用的是函数自身,在上面的代码 ...
- js中onmouseleave和onmouseout的区别详解
onmouseleave和onmouseout的区别: 给元素绑定事件,当元素没有子元素的时候,上面两个事件没有区别.当元素有子元素的时候,上面两个的触发机制不同.onmouseleave触发的条件是 ...
- js中childNodes易错点、详解定义以及用法
js中childNodes易错点.详解定义以及用法 最近学习的时候,我遇到了childNodes的一些问题,我查阅了一些资料,总结一下其定义及用法.在学习childNodes之前,我们需要先了解一下D ...
- vue build text html,Vue中v-text / v-HTML使用实例代码详解_放手_前端开发者
废话少说,代码如下所述: /p> 显示123 /p> 补充:vuejs {{}},v-text 和 v-html的区别 {{message}} let app = new Vue({ el ...
- js数组中foEach和map的用法详解 jq中的$.each和$.map
数组中foEach和map的用法详解 相同点: 1.都是循环遍历数组(仅仅是数组)中的每一项. 2.forEach() 和 map() 里面每一次执行匿名函数都支持3个参数:数组中的当前项value, ...
最新文章
- 自己实现 koa 中间件的 app.use 和 next 函数
- C++ Bayes‘ theorem贝叶斯定理的实现算法(附完整源码)
- Sentinel流控规则_流控等待_分布式系统集群限流_线程数隔离_削峰填谷_流量控制_速率控制_服务熔断_服务降级---微服务升级_SpringCloud Alibaba工作笔记0037
- 微软技术沙龙 思考 体验 真正的中国网络技术
- 幂次方计算_4.初中数学:怎么求n的m次方的值?幂的运算,单项式相乘,基础常见考试题...
- 华为交换机关闭网口_华为交换机如何关闭网络端口号
- python(xlwt的简单运用)
- PettingZoo:多智能体游戏环境库入门
- 关于《论文写作》课程的心得和体会
- 关于华为云会议的测评
- 传真百科:电子传真邮件客户端
- SWFAddress实现Flex深度链接(不同模块具有不同的URL)
- filament 5 Use IBL
- async和await的用法
- Android中错误Annotation processors must be explicitly declared now. The following dependencies on the
- 在ubuntu16.04下测试ffplay程序
- 2.(cesium篇)cesium加载接入百度地图
- 特性提醒-Qt6录音QIODevice::readAll()返回奇数字节。
- 关于搜索引擎:搜集、分析、索引、查询。
- AdminLTE2 框架的使用