解析dom中的children对象数组元素firstChild,lastChild的使用


Posted in Javascript onJuly 10, 2013
<!--children对象数组元素示例 -->
<html> 
<body> 
  <table   id="tbl">   
  <tbody> <tr> <td> 行1列1 </td><td>行1列2 </td></tr>   
  <tr> <td> 行2列1 </td><td>行2列2 </td></tr> 
  </tbody> 
  </table>   
  <input   onclick="alert(document.all.tbl.children(0).children(0).innerHTML)"   value="children(0)"   type="button">   
  <input   onclick="alert(document.all.tbl.children(0).children(1).innerHTML)"   value="children(1)"   type="button">   
  <input   onclick="alert(document.all.tbl.children(0).children(1).children(0).innerHTML)"   value="children(2)"   type="button"> 
  <div   id=test>   
  <a></a>   
  <table></table>   
  </div>     <script>   
  alert(test.children[0].tagName)   
  alert(test.children[1].tagName)   
  </script>   
</body> 
</html> 

<!--在DOM中,整个页面里的元素是个树型结构 
children 代表对象的子节点数组-->
document.all.tbl.children(0).children(0).innerHTML解释 
document.all.tbl.children(0)定位到table的第一个子节点<tbody> 
document.all.tbl.children(0).children(0)定位到table的第一个子节点的第一个子节点<tr>,打印结果<td> 行1列1 </td><td>行1列2 </td> 

document.all.tbl.children(0).children(1).innerHTML,打印结果<td> 行2列1 </td><td>行2列2 </td> 

document.all.tbl.children(0).children(1).children(0).innerHTML 打印结果行2列2 

<!--fistChild,lastChild示例--> 
<html> 
<body> 
  <table   id="tbl">   
  <tbody> <tr id="tr1"> <td> 行1列1 </td><td>行1列2 </td></tr>   
  <tr> <td="tr2"> 行2列1 </td><td>行2列2 </td></tr> 
  </tbody> 
  </table>   
  <input   onclick="alert(document.all.tbl.firstChild.firstChild.innerHTML)"   value="children(0)"   type="button">   
  <input   onclick="alert(document.all.tbl.firstChild.lastChild.innerHTML)"   value="children(1)"   type="button">   
  <input   onclick="alert(document.all.tbl.firstChild.lastChild.firstChild.innerHTML)"   value="children(2)"   type="button"> 
  <div   id=test>   
  <a></a>   
  <table></table>   
  </div>   
  <script>   
  alert(test.firstChild.tagName)   
  alert(test.lastChild.tagName)   
  </script>   
</body> 
</html> 
document.all.tbl.firstChild定位到table的第一个子节点<tbody> 
document.all.tbl.firstChild.firstChild定位到table的第一个子节点<tbody> 
的第一个子节点<tr id="tr1"> 
document.all.tbl.firstChild.firstChild.innerHTML打印结果是<td> 行1列1 </td><td>行1列2 </td> 

document.all.tbl.firstChild.lastChild定位到table的第一个子节点<tbody> 
的最后子节点<tr id="tr2"> 
document.all.tbl.firstChild.lastChild.innerHTML打印结果是<td="tr2"> 行2列1 </td><td>行2列2 </td> 

document.all.tbl.firstChild.lastChild.firstChild.innerHTML 打印结果是 
行2列2
Javascript 相关文章推荐
div移动 输入框不能输入的问题
Nov 19 Javascript
jQuery validate 中文API 附validate.js中文api手册
Jul 31 Javascript
js菜单点击显示或隐藏效果的简单实例
Jan 13 Javascript
input标签内容改变的触发事件介绍
Jun 18 Javascript
js实现内容显示并使用json传输数据
Mar 16 Javascript
深入分析javascript中的错误处理机制
Jul 17 Javascript
同步文本框内容JS代码实现
Aug 04 Javascript
网络传输协议(http协议)
Nov 18 Javascript
浅谈Vue CLI 3结合Lerna进行UI框架设计
Apr 14 Javascript
websocket4.0+typescript 实现热更新的方法
Aug 14 Javascript
Nuxt v-bind绑定img src不显示的解决
Dec 05 Javascript
JavaScript监听一个DOM元素大小变化
Apr 26 Javascript
关于js遍历表格的实例
Jul 10 #Javascript
js浮动图片的动态效果
Jul 10 #Javascript
JS文本框默认值处理详解
Jul 10 #Javascript
JS实现点击下载的小例子
Jul 10 #Javascript
javascript 得到文件后缀名的思路及实现
May 09 #Javascript
让js弹出窗口居前显示的实现方法
Jul 10 #Javascript
JavaScript:new 一个函数和直接调用函数的区别分析
Jul 10 #Javascript
You might like
phpmyadmin的#1251问题
2006/11/25 PHP
PHP 开发环境配置(Zend Studio)
2010/04/28 PHP
php中防止恶意刷新页面的代码小结
2012/10/31 PHP
Yii框架常见缓存应用实例小结
2019/09/09 PHP
在textarea文本域中显示HTML代码的方法
2007/03/06 Javascript
JS 创建对象(常见的几种方法)
2008/11/03 Javascript
JavaScript高级程序设计 阅读笔记(十四) js继承机制的实现
2012/08/14 Javascript
js实现全屏漂浮广告移入光标停止移动
2013/12/02 Javascript
浅谈JavaScript函数参数的可修改性问题
2013/12/05 Javascript
jQuery实现多按钮单击变色
2014/11/27 Javascript
JavaScript中的原型链prototype介绍
2014/12/30 Javascript
Jquery 实现grid绑定模板
2015/01/28 Javascript
简介JavaScript中POSITIVE_INFINITY值的使用
2015/06/05 Javascript
基于jQuery实现搜索关键字自动匹配功能
2020/03/26 Javascript
特殊日期提示功能的实现方法
2016/06/16 Javascript
jQuery解决$符号命名冲突
2016/06/18 Javascript
详解Jquery的事件操作和文档操作
2016/12/19 Javascript
Angular使用Md5加密的解决方法
2017/09/16 Javascript
详解如何用模块化的方式写vuejs
2017/12/16 Javascript
微信小程序实现循环动画效果
2018/07/16 Javascript
layer.open回调获取弹出层参数的实现方法
2019/09/10 Javascript
详解element上传组件before-remove钩子问题解决
2020/04/08 Javascript
微信小程序实现倒计时功能
2020/11/19 Javascript
[01:57]2018年度DOTA2最具潜力解说-完美盛典
2018/12/16 DOTA
批处理与python代码混合编程的方法
2016/05/19 Python
用Python写一个无界面的2048小游戏
2016/05/24 Python
详解Swift中属性的声明与作用
2016/06/30 Python
Jupyter notebook命令和编辑模式常用快捷键汇总
2020/11/17 Python
下列程序在32位linux或unix中的结果是什么
2015/01/26 面试题
AJAX的全称是什么
2012/11/06 面试题
医院护士的求职信范文
2013/12/26 职场文书
青年教师培训方案
2014/02/06 职场文书
院党委组织查摆问题对照检查材料思想汇报2014
2014/10/08 职场文书
职工培训工作总结
2015/08/10 职场文书
导游词之黄帝陵景区
2019/09/16 职场文书
python爬虫之selenium库的安装及使用教程
2021/05/23 Python