编程 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 相关文章推荐

Sample script that deletes a SQL Server database

Jun 16 Javascript

jQuery支持动态参数将函数绑定到事件上的方法

Mar 17 Javascript

基于HTML模板和JSON数据的JavaScript交互(移动端)

Apr 06 Javascript

ES6概念 Symbol toString()方法

Dec 25 Javascript

基于vue1和vue2获取dom元素的方法

Mar 17 Javascript

node打造微信个人号机器人的方法示例

Apr 26 Javascript

JavaScript创建防篡改对象的方法分析

Dec 30 Javascript

vue element upload实现图片本地预览

Aug 20 Javascript

js实现打字小游戏

Dec 17 Javascript

Node.js path模块,获取文件后缀名操作

Nov 07 Javascript

关于better-scroll插件的无法滑动bug(2021通过插件解决)

Mar 01 Javascript

JS实现简单九宫格抽奖

Jun 28 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

《魔兽世界》惊魂幻象将获得调整

2020/03/08 其他游戏

PHP缓存技术的多种方法小结

2012/08/14 PHP

PHP正则表达式替换站点关键字链接后空白的解决方法

2014/09/16 PHP

Yii2隐藏frontend/web和backend/web的方法

2015/12/12 PHP

Symfony2学习笔记之控制器用法详解

2016/03/17 PHP

浅谈php中curl、fsockopen的应用

2016/12/10 PHP

PHP实现的迪科斯彻(Dijkstra)最短路径算法实例

2017/09/16 PHP

jquery星级插件、支持页面中多次使用

2012/03/25 Javascript

jquery 动态创建元素的方式介绍及应用

2013/04/21 Javascript

javascript与有限状态机详解

2014/05/08 Javascript

JavaScript实现自动生成网页元素功能（按钮、文本等）

2015/11/21 Javascript

Bootstrap安装环境配置教程分享

2016/05/27 Javascript

Angular.JS学习之依赖注入$injector详析

2016/10/20 Javascript

javaScript 逻辑运算符使用技巧整理

2017/05/03 Javascript

jQuery删除/清空指定元素的所有子节点实例代码

2019/07/04 jQuery

小程序分享链接onShareAppMessage的具体用法

2020/05/22 Javascript

解决vue+webpack项目接口跨域出现的问题

2020/08/10 Javascript

JS实现多功能计算器

2020/10/28 Javascript

[49:08]Secret vs VP 2018国际邀请赛小组赛BO2 第一场 8.17

2018/08/20 DOTA

python在新的图片窗口显示图片(图像)的方法

2019/07/11 Python

flask实现验证码并验证功能

2019/12/05 Python

解决TensorFlow模型恢复报错的问题

2020/02/06 Python

python实现简单贪吃蛇游戏

2020/09/29 Python

Python descriptor(描述符)的实现

2020/11/15 Python

python IP地址转整数

2020/11/20 Python

中国文明网签名寄语

2014/01/18 职场文书

文科生自我鉴定

2014/02/15 职场文书

财务部副经理岗位职责范本

2014/06/17 职场文书

2014年小学英语教师工作总

2014/12/03 职场文书

2015年爱国卫生工作总结

2015/04/22 职场文书

党员“一帮一”活动总结

2015/05/07 职场文书

2016党员学习《反对自由主义》心得体会

2016/01/22 职场文书

不会写演讲稿，快来看看这篇文章！

2019/08/06 职场文书

浅谈tf.train.Saver()与tf.train.import_meta_graph的要点

2021/05/26 Python

从np.random.normal()到正态分布的拟合操作

2021/06/02 Python

Go语言grpc和protobuf

2022/04/13 Golang