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 相关文章推荐
AJAX异步从优酷专辑中采集所有视频及信息(JavaScript代码)
Nov 20 Javascript
jQuery对下拉框,单选框,多选框的操作
Feb 21 Javascript
javascript实现画不相交的圆
Apr 07 Javascript
不定义JQuery插件 不要说会JQuery
Mar 07 Javascript
javascript的列表切换【实现代码】
May 03 Javascript
浅谈jquery选择器 :first与:first-child的区别
Nov 20 Javascript
Angularjs cookie 操作实例详解
Sep 27 Javascript
iview同时验证多个表单问题总结
Sep 29 Javascript
vue-cli2 构建速度优化的实现方法
Jan 08 Javascript
vue实现表格过滤功能
Sep 27 Javascript
js仿淘宝放大镜效果
Dec 28 Javascript
vue3中provide && inject的使用
Jul 01 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
用Zend Encode编写开发PHP程序
2010/02/21 PHP
Yii框架中 find findAll 查找出制定的字段的方法对比
2014/09/10 PHP
php使用str_replace实现输入框回车替换br的方法
2014/11/24 PHP
PHP使用JSON和将json还原成数组
2015/02/12 PHP
在b/s开发中经常用到的javaScript技术
2006/08/23 Javascript
extjs fckeditor集成代码
2009/05/10 Javascript
一个封装js代码-----展开收起效果示例
2013/07/03 Javascript
js实现完全自定义可带多级目录的网页鼠标右键菜单方法
2015/02/28 Javascript
jQuery Ajax页面局部加载方法汇总
2016/06/02 Javascript
基于slideout.js实现移动端侧边栏滑动特效
2016/11/28 Javascript
Jquery Easyui验证组件ValidateBox使用详解(20)
2016/12/18 Javascript
js实现时间轴自动排列效果
2017/03/09 Javascript
Vee-Validate的使用方法详解
2017/09/22 Javascript
Vue进度条progressbar组件功能
2018/04/17 Javascript
利用d3.js力导布局绘制资源拓扑图实例教程
2019/01/08 Javascript
微信小程序实现简易table表格
2020/06/19 Javascript
jQuery实现移动端下拉展现新的内容回弹动画
2020/06/24 jQuery
jQuery使用hide()、toggle()函数实现相机品牌展示隐藏功能
2021/01/29 jQuery
python3实现短网址和数字相互转换的方法
2015/04/28 Python
python装饰器与递归算法详解
2016/02/18 Python
Python多继承顺序实例分析
2018/05/26 Python
在python中bool函数的取值方法
2018/11/01 Python
Python之Class&amp;Object用法详解
2019/12/25 Python
python 解决tqdm模块不能单行显示的问题
2020/02/19 Python
在jupyter notebook中调用.ipynb文件方式
2020/04/14 Python
孤独星球出版物:Lonely Planet Publications
2018/03/17 全球购物
Luxplus荷兰:以会员价购买美容产品等,独家优惠
2019/08/30 全球购物
员工评语大全
2014/01/19 职场文书
人资专员岗位职责
2014/04/04 职场文书
八项规定对照检查材料
2014/08/31 职场文书
2014房屋登记授权委托书
2014/10/13 职场文书
应聘教师自荐信
2015/03/26 职场文书
2015年乡镇食品安全工作总结
2015/10/22 职场文书
2016班级元旦联欢会开幕词
2016/03/04 职场文书
MySQL系列之开篇 MySQL关系型数据库基础概念
2021/07/02 MySQL
MySQL数据库查询进阶之多表查询详解
2022/04/08 MySQL