js中childNodes易错点、详解定义以及用法

最近学习的时候，我遇到了childNodes的一些问题，我查阅了一些资料，总结一下其定义及用法。在学习childNodes之前，我们需要先了解一下DOM。
　　 DOM：文档对象模型，描绘了一个层次化的节点树，允许开发人员添加，删除，修改页面的某一部分。如下图文档对象模型图册所示：

　它常见的5种节点类型如下：

节点类型	说明	值
元素节点	每一个HTML标签都是一个元素节点，如 div 、 p、ul等，换行符要在这里强调一下。	1
属性节点	元素节点（HTML标签）的属性，如 id 、class 、name 等。	2
文本节点	abcd 像这样的一段文字，没有任何的html标签，就是文本节点。空白符要在这里强调一下	3
注释节点	表示文档注释，形式为<！-- comment text -->。	8
文档节点	表示整个文档（DOM 树的根节点，即 document ）	9

　　childNodes属性可以用来获取任意一个元素的所有子元素，它包含了上面所写到的文本节点、元素节点和注释节点。

　　文档节点和属性节则不被包含在内。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>用节点输出文本</title></head><body><div id="lianJie" style="background-color: gray;"><a href="xinlang" id="xinlanglianjie"><span>新浪</span><span>新浪1</span></a><br /><a href="baidu"><span>百度</span></a><a href="wangyi"><span>网易</span></a><a href="zhonghuawang"><span>中华网</span></a>  <!--注释--></div><script language="JavaScript">//提示当前页面中所有超链接名称和网址，做成键值输出var adr = "";//遍历超链接集合,links 属性返回一个文档中所有具有 href 属性值的 <area> 元素与 <a> 元素的集合。for(n in document.links){//如果其links数组的长度等于其子节点的长度，必须跳出循环，否则会出现异常if (document.links.length == document.links[n]) {break}//获取links的第一个子节点adr += document.links[n].childNodes[0].innerHTML + ": \t" + document.links[n] + "\n";}alert( adr );  </script></body>
</html>

运行结果如下所示：

这个结果是没有问题，但是代码稍微变了一下，问题就来了，如下图所示:

　　这是因为childNodes属性返回的子节点中，它包含了空白符。当span标签换行的时候，它会把空白符算进去。这往往是新手容易忽视的点。

　　下面我们来具体说说childNodes子节点的长度以及如何查看子节点。它的长度举例，按照下图所示：

以下我们可以用代码来获取上面a标签的子节点长度及其内容：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>循环训练</title></head><body><div style="background-color: gray;"><a href="xinlang" id="lianJie"><span>新浪</span><br /><span>新浪1</span><!--注释--></a></div><script language="JavaScript">//获取lianjievar lianJie = document.getElementById("lianJie").childNodes;//使用childNodes.length可以输出其长度console.log(lianJie.length);//nodeName输出字节的内容var txt="";for (i=0; i<lianJie.length; i++){txt=txt +lianJie[i].nodeName;}console.log(txt);         </script></body>
</html>

其运行结果如下：

js中childNodes易错点、详解定义以及用法相关推荐

js中toString()和String()区别详解
转载自 js中toString()和String()区别详解我们知道String()与 .toString()都是可以转换为字符串类型,但是String()与 .toString()的还是有区别的 ...
vue在created调用点击方法_vue.js中created方法的使用详解
这次给大家带来vue.js中created方法的使用详解,使用vue.js中created方法的注意事项有哪些,下面就是实战案例,一起来看一下. 这是它的一个生命周期钩子函数,就是一个vue实例被生成 ...
JS中的日期和时间详解
JS中的日期和时间详解关于Date()构造函数简单实例用Date()构造函数创建时钟关于Date()构造函数 Date()构造函数是javascript的核心语言部分,用来创建表示时间和日期的 ...
js中的preventDefault与stopPropagation详解（转）
先讲解一下js中preventDefault和stopPropagation两个方法的区别: preventDefault方法的起什么作用呢?我们知道比如<a href="http:/ ...
js中转换json对象方法详解及使用案例
JSON(JavaScript Object Notation)是一种轻量级的数据交换格式.因为采用独立于语言的文本格式,也使用了类似于C语言家族的习惯,拥有了这些特性使使JSON称为理想的数据交换语 ...
php模拟红绿灯,JS 中使用Promise 实现红绿灯详解
本文通过实例代码给大家介绍了JS 中使用Promise 实现红绿灯效果,在文中给大家介绍了一个promise用法例子,需要的朋友可以参考下,希望能帮助到大家. 要求使用promise 实现红绿灯颜色的 ...
js中的preventDefault与stopPropagation详解
1. preventDefault: 比如<a href="http://www.baidu.com">百度</a>,这是html中最基础的东西,起的作用就 ...
行为模型实例 php,JS中事件模型的实例详解
之前对事件模型还是比较清楚的,许多概念都清晰映射在脑海中.工作之后,一方面使用的局限性,二是习惯于用框架中的各种事件监听方式,简单即方便,久而久之,事件的一些概念开始淡出记忆中,就像我现在已经开始 ...
JS中的事件委托 / 代理详解
[前言] 事件委托/代理是前端面试的经典题型,要去找工作的小伙伴看看还是有帮助的 [主体] 概述: 那什么叫事件委托呢?它还有一个名字叫事件代理,JavaScript高级程序设计上讲:事件委托就是利用 ...

js中childNodes易错点、详解定义以及用法

js中childNodes易错点、详解定义以及用法

js中childNodes易错点、详解定义以及用法相关推荐

最新文章

热门文章