JavaScript操作DOM元素的childNodes和children区别


Posted in Javascript onApril 01, 2015

对于DOM元素,children是指DOM Object类型的子对象,不包括tag之间隐形存在的TextNode,而childNodes包括tag之间隐形存在的TextNode对象。

具体看一下针对children和childNodes在chrome环境下的测试:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
 <div id="div1" class="div">
 <span id="s1" class="sp" lang="zh-cn">
 </span>
 </div>
</body>
<script type="text/javascript">
 
 function test() {
 var o = document.getElementById("div1");
 var child = o.children;
 console.log("div1.children运行结果:");
 for(i = 0; i < child.length; i++){
   console.log(child[i].tagName);
  }
 
 console.log("");
 child = o.childNodes;
 console.log("div1.childNodes运行结果:");
 for(i = 0; i < child.length; i++){
   console.log(child[i].tagName);
  }
 
 }
 
 test();

</script>
</html>

测试结果如下:

div1.children运行结果:
 SPAN

 div1.childNodes运行结果:
 undefined
 SPAN
 undefined

上面childNodes集合的结果中有两个undefined节点,这连个就是nodeType=3的TextNode。

如果把HTML代码写成如下样式,那么children和childNodes的结果就没有差别了。

<body>
 <div id="div1" class="div"><span id="s1" class="sp" lang="zh-cn"></span></div>
</body>

对document、head、body及div等HTML元素实测未发现有其他差异

Javascript 相关文章推荐
如何简单地用YUI做JavaScript动画
Mar 10 Javascript
juqery 学习之三 选择器 层级 基本
Nov 25 Javascript
xml转json的js代码
Aug 28 Javascript
javascript生成随机大小写字母的方法
Feb 20 Javascript
JS交换变量的方法
Jan 21 Javascript
javascript动态获取登录时间和在线时长
Feb 25 Javascript
jQuery实现查找链接文字替换属性的方法
Jun 27 Javascript
详解angular中如何监控dom渲染完毕
Jan 03 Javascript
vue货币过滤器的实现方法
Apr 01 Javascript
Vue.js实战之通过监听滚动事件实现动态锚点
Apr 04 Javascript
Kindeditor单独调用多图上传实例
Jul 31 Javascript
vue中v-for通过动态绑定class实现触发效果
Dec 06 Javascript
JS使用oumousemove和oumouseout动态改变图片显示的方法
Mar 31 #Javascript
js使用onmousemove和onmouseout获取鼠标坐标的方法
Mar 31 #Javascript
JS显示下拉列表框内全部元素的方法
Mar 31 #Javascript
JS动态改变表格边框宽度的方法
Mar 31 #Javascript
60行js代码实现俄罗斯方块
Mar 31 #Javascript
JS动态修改表格cellPadding和cellSpacing的方法
Mar 31 #Javascript
js实现的牛顿摆效果
Mar 31 #Javascript
You might like
PHPLog php 程序调试追踪工具
2009/09/09 PHP
PHP游戏编程25个脚本代码
2011/02/08 PHP
基于Codeigniter框架实现的student信息系统站点动态发布功能详解
2017/03/23 PHP
JavaScript XML实现两级级联下拉列表
2008/11/10 Javascript
javascript XML数据显示为HTML一例
2008/12/23 Javascript
表单元素与非表单元素刷新区别详细解析
2013/11/06 Javascript
js实现特定位取反原理及示例
2014/06/30 Javascript
js中的getAttribute方法使用示例
2014/08/01 Javascript
浅谈Javascript中的12种DOM节点类型
2016/08/19 Javascript
jQuery实现简洁的轮播图效果实例
2016/09/07 Javascript
JavaScript九九乘法口诀表的简单实现
2016/10/04 Javascript
JavaScript装饰器函数(Decorator)实例详解
2017/03/30 Javascript
JavaScript用二分法查找数据的实例代码
2017/06/17 Javascript
ES6中的rest参数与扩展运算符详解
2017/07/18 Javascript
Bootstrap Tooltip显示换行和左对齐的解决方案
2017/10/11 Javascript
JS 使用 window对象的print方法实现分页打印功能
2018/05/16 Javascript
vue自定义底部导航栏Tabbar的实现代码
2018/09/03 Javascript
[01:15]《辉夜杯》北京网鱼队巡礼
2015/10/26 DOTA
[48:24]完美世界DOTA2联赛循环赛LBZS vs Forest 第一场 10月30日
2020/10/31 DOTA
Python的Django框架中if标签的相关使用
2015/07/15 Python
Python多线程threading和multiprocessing模块实例解析
2018/01/29 Python
Python tkinter事件高级用法实例
2018/01/31 Python
Python实现爬取百度贴吧帖子所有楼层图片的爬虫示例
2018/04/26 Python
pytorch 转换矩阵的维数位置方法
2018/12/08 Python
详解如何管理多个Python版本和虚拟环境
2019/05/10 Python
Python数据结构与算法(几种排序)小结
2019/06/22 Python
使用OpenCV实现仿射变换—缩放功能
2019/08/29 Python
世界上最大的高分辨率在线图片库:Alamy
2018/07/07 全球购物
俄罗斯披萨、寿司和面食送货到家服务:2 Берега
2019/12/15 全球购物
盛大笔试题
2016/11/05 面试题
XMLHttpRequest对象在IE和Firefox中创建方式有没有不同
2016/03/23 面试题
党员个人剖析材料(四风问题)
2014/10/07 职场文书
青年文明号汇报材料
2014/12/23 职场文书
家长评语怎么写
2014/12/30 职场文书
Python词云的正确实现方法实例
2021/05/08 Python
关于python类SortedList详解
2021/09/04 Python