解析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 相关文章推荐
javascript String 对象
Apr 25 Javascript
24款非常有用的 jQuery 插件分享
Apr 06 Javascript
JavaScript 放大镜 放大倍率和视窗尺寸
May 09 Javascript
JS模拟面向对象全解(二、类型与赋值)
Jul 13 Javascript
javascript在IE下trim函数无法使用的解决方法
Sep 12 Javascript
jQuery+Ajax+PHP+Mysql实现分页显示数据实例讲解
Sep 27 Javascript
精通JavaScript的this关键字
May 28 Javascript
jquery选择器中的空格与大于号&gt;、加号+与波浪号~的区别介绍
Jun 24 Javascript
javascript验证内容为数字以及长度为10的简单实例
Aug 20 Javascript
vue.js 实现图片本地预览 裁剪 压缩 上传功能
Mar 01 Javascript
微信小程序收藏功能的实现代码
Jun 12 Javascript
chosen实现省市区三级联动
Aug 16 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
删除及到期域名的查看(抢域名必备哦)
2008/05/14 PHP
PHP 加密与解密的斗争
2009/04/17 PHP
PHP HTML代码串 截取实现代码
2009/06/29 PHP
PHP+XML 制作简单的留言本 图文教程
2009/11/02 PHP
如何使用jQuery+PHP+MySQL来实现一个在线测试项目
2015/04/26 PHP
php查询操作实现投票功能
2016/05/09 PHP
PHP入门教程之日期与时间操作技巧总结(格式化,验证,获取,转换,计算等)
2016/09/11 PHP
PHP中include和require的区别实例分析
2017/05/07 PHP
php注册系统和使用Xajax即时验证用户名是否被占用
2017/08/31 PHP
Javascript中的Split使用方法与技巧
2007/03/09 Javascript
javascript 带有滚动条的表格,标题固定,带排序功能.
2009/11/13 Javascript
JavaScript调用后台的三种方法实例
2013/10/17 Javascript
JavaScript实现的双向跨域插件分享
2015/01/31 Javascript
基于jQuery实现鼠标点击导航菜单水波动画效果附源码下载
2016/01/06 Javascript
Node.js刷新session过期时间的实现方法推荐
2016/05/18 Javascript
Angularjs中的ui-bootstrap的使用教程
2017/02/19 Javascript
JS中数据结构之栈
2019/01/01 Javascript
js实现图片放大并跟随鼠标移动特效
2019/01/18 Javascript
使用Angular Cli如何创建Angular私有库详解
2019/01/30 Javascript
jQuery利用cookie 实现本地收藏功能(不重复无需多次命名)
2019/11/07 jQuery
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
2021/01/08 Vue.js
[03:17]DOTA2英雄基础教程 剧毒术士
2013/12/12 DOTA
[42:06]2019国际邀请赛全明星赛 8.23
2019/09/05 DOTA
python实现类的静态变量用法实例
2015/05/08 Python
Python Socket编程详细介绍
2017/03/23 Python
Python自定义装饰器原理与用法实例分析
2018/07/16 Python
详解opencv中画圆circle函数和椭圆ellipse函数
2019/12/27 Python
如何用python免费看美剧
2020/08/11 Python
财务内勤岗位职责
2014/04/17 职场文书
普通党员自我剖析材料
2014/10/07 职场文书
2016年大学生寒假社会实践心得体会
2015/10/09 职场文书
七年级作文之冬景
2019/11/07 职场文书
python 自动化偷懒的四个实用操作
2021/04/11 Python
pytorch 中autograd.grad()函数的用法说明
2021/05/12 Python
Python多线程实用方法以及共享变量资源竞争问题
2022/04/12 Python
一文搞懂PHP中的抽象类和接口
2022/05/25 PHP