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 相关文章推荐
js简单实现根据身份证号码识别性别年龄生日
Nov 29 Javascript
JS表的模拟方法
Feb 05 Javascript
基于javascript代码检测访问网页的浏览器呈现引擎、平台、Windows操作系统、移动设备和游戏系统
Dec 03 Javascript
js判断图片加载完成后获取图片实际宽高的方法
Feb 25 Javascript
jQuery siblings()用法实例详解
Apr 26 Javascript
JavaScript中的操作符类型转换示例总结
May 30 Javascript
webpack配置文件和常用配置项介绍
Apr 28 Javascript
js原生代码实现轮播图的实例讲解
Jul 28 Javascript
Vue项目中设置背景图片方法
Feb 21 Javascript
vue实现2048小游戏功能思路详解
May 09 Javascript
关于jquery中attr()和prop()方法的区别
May 28 jQuery
vue整合百度地图显示指定地点信息
Apr 06 Vue.js
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
PHP curl 并发最佳实践代码分享
2012/09/05 PHP
PHP分页初探 一个最简单的PHP分页代码的简单实现
2016/06/21 PHP
浅谈php中fopen不能创建中文文件名文件的问题
2017/02/06 PHP
PHP实现的mysql主从数据库状态检测功能示例
2017/07/20 PHP
HTTP 304错误的详细讲解
2013/11/13 Javascript
JQuery选择器绑定事件及修改内容的方法
2015/01/23 Javascript
JavaScript获取按钮所在form表单id的方法
2015/04/02 Javascript
Javascript编程中几种继承方式比较分析
2015/11/28 Javascript
javascript中apply、call和bind的使用区别
2016/04/05 Javascript
jquery跟随屏幕滚动效果的实现代码
2016/04/13 Javascript
Bootstrap中datetimepicker使用小结
2016/12/28 Javascript
BootStrap Fileinput上传插件使用实例代码
2017/07/28 Javascript
nginx+vue.js实现前后端分离的示例代码
2018/02/12 Javascript
Vue 全局loading组件实例详解
2018/05/29 Javascript
AngularJs1.x自定义指令独立作用域的函数传入参数方法
2018/10/09 Javascript
node.js实现微信开发之获取用户授权
2019/03/18 Javascript
JS判断数组是否包含某元素实现方法汇总
2020/06/24 Javascript
原生js+css实现tab切换功能
2020/09/17 Javascript
Windows下搭建python开发环境详细步骤
2020/07/20 Python
Python中基础的socket编程实战攻略
2016/06/01 Python
Anaconda多环境多版本python配置操作方法
2017/09/12 Python
Python 忽略warning的输出方法
2018/10/18 Python
Python数据持久化存储实现方法分析
2019/12/21 Python
浅谈关于html5中图片抛物线运动的一些心得
2018/01/09 HTML / CSS
Marc Jacobs官方网站:美国奢侈品牌
2017/08/29 全球购物
高级3D打印市场:Gambody
2019/12/26 全球购物
Myprotein荷兰官网:欧洲第一运动营养品牌
2020/07/11 全球购物
C/C++程序员常见面试题一
2012/12/08 面试题
关于人生的感言
2014/01/17 职场文书
团队经理竞聘书
2014/03/31 职场文书
法制宣传月活动总结
2014/04/29 职场文书
表彰大会策划方案
2014/05/13 职场文书
2014年企业员工工作总结
2014/12/09 职场文书
部门2015年度工作总结
2015/04/29 职场文书
士兵突击观后感
2015/06/16 职场文书
DIV CSS实现网页背景半透明效果
2021/12/06 HTML / CSS