编程 Javascript

解析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 面向对象继承

Nov 26 Javascript

JavaScript 常见对象类创建代码与优缺点分析

Dec 07 Javascript

js中点击空白区域时文本框与隐藏层的显示与影藏问题

Aug 26 Javascript

html+js实现动态显示本地时间

Sep 21 Javascript

JavaScript的继承的封装介绍

Oct 15 Javascript

HTTP 304错误的详细讲解

Nov 13 Javascript

Jquery.Form 异步提交表单的简单实例

Mar 03 Javascript

javascript中利用柯里化函数实现bind方法【推荐】

Apr 29 Javascript

JS打印组合功能

Aug 04 Javascript

基于javascript的Form表单验证

Dec 29 Javascript

Vue 多层组件嵌套二种实现方式(测试实例)

Sep 08 Javascript

Angular实现的敏感文字自动过滤与提示功能示例

Dec 29 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

php下载文件的代码示例

2012/06/29 PHP

php socket客户端及服务器端应用实例

2014/07/04 PHP

centos 7.2下搭建LNMP环境教程

2016/11/20 PHP

php表单文件iframe异步上传实例讲解

2017/07/26 PHP

Laravel框架生命周期与原理分析

2018/06/12 PHP

PHP PDOStatement::bindValue讲解

2019/01/30 PHP

php5.3/5.4/5.5/5.6/7常见新增特性汇总整理

2020/02/27 PHP

PHP设计模式（四）原型模式Prototype实例详解【创建型】

2020/05/02 PHP

JS IE和FF兼容性问题汇总

2009/02/09 Javascript

jquery实现个人中心导航菜单效果和美观都非常不错

2014/09/02 Javascript

Javascript中设置默认参数值示例

2014/09/11 Javascript

Angularjs编写KindEditor,UEidtor,jQuery指令

2015/01/28 Javascript

js实现仿百度汽车频道选择汽车图片展示实例

2015/05/06 Javascript

Javascript表单特效之十大常用原理性样例代码大总结

2016/07/12 Javascript

AngularJS基础 ng-src 指令简单示例

2016/08/03 Javascript

Vue.js之slot深度复制详解

2017/03/10 Javascript

基于HTML5+JS实现本地图片裁剪并上传功能

2017/03/24 Javascript

vue-cli项目如何使用vue-resource获取本地的json数据（模拟服务端返回数据）

2017/08/04 Javascript

浅谈vue.use()方法从源码到使用

2019/05/12 Javascript

JS实现网站吸顶条

2020/01/08 Javascript

[50:29]2014 DOTA2华西杯精英邀请赛 5 24 DK VS iG

2014/05/26 DOTA

[01:00:59]VP VS VG Supermajor小组赛胜者组第二轮 BO3第二场 6.2

2018/06/03 DOTA

python的re模块应用实例

2014/09/26 Python

详解【python】str与json类型转换

2019/04/29 Python

pandas的to_datetime时间转换使用及学习心得

2019/08/11 Python

python 命名规范知识点汇总

2020/02/14 Python

Python响应对象text属性乱码解决方案

2020/03/31 Python

Python tkinter实现日期选择器

2021/02/22 Python

真正了解CSS3背景下的@font face规则

2017/05/04 HTML / CSS

欧洲最大的高尔夫零售商：American Golf

2019/09/02 全球购物

Java面试题及答案

2012/09/08 面试题

火锅店创业计划书范文

2014/02/02 职场文书

入职担保书范文

2014/05/21 职场文书

应届生找工作求职信

2014/06/24 职场文书

银行安全保卫工作总结

2015/08/10 职场文书

2016年法制宣传月活动总结

2016/04/01 职场文书