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

比较新旧两个数组值得增加和删除的JS代码

Oct 30 Javascript

js中replace的用法总结

Dec 27 Javascript

在百度知道团队中快速审批新成员的js脚本

Feb 02 Javascript

JS实现光滑展开合拢的菜单效果代码

Sep 16 Javascript

什么是JavaScript注入攻击?

Sep 14 Javascript

可输入文字查找ajax下拉框控件 ComBox的实现方法

Oct 25 Javascript

jQuery实现的简单动态添加、删除表格功能示例

Sep 21 jQuery

AngularJS中scope的绑定策略实例分析

Oct 30 Javascript

Flutter实现仿微信底部菜单栏功能

Sep 18 Javascript

JS如何实现网站中PC端和手机端自动识别并跳转对应的代码

Jan 08 Javascript

创建nuxt.js项目流程图解

Mar 13 Javascript

vue切换菜单取消未完成接口请求的案例

Nov 13 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/04/24 PHP

编写PHP脚本使WordPress的主题支持Widget侧边栏

2015/12/14 PHP

Laravel框架实现多个视图共享相同数据的方法详解

2019/07/09 PHP

laravel excel 上传文件保存到本地服务器功能

2019/11/14 PHP

thinkphp5 框架结合plupload实现图片批量上传功能示例

2020/04/04 PHP

JS中用户登录系统的解决办法

2013/04/15 Javascript

javascript两种function的定义介绍及区别说明

2013/05/02 Javascript

js调用iframe实现打印页面内容的方法

2014/03/04 Javascript

HTML，CSS，JavaScript速查表推荐

2014/12/02 Javascript

Vue.js系列之vue-router(上)(3)

2017/01/03 Javascript

bootstrap modal+gridview实现弹出框效果

2017/08/15 Javascript

jQuery实现点击DIV同时点击CheckBox,并为DIV上背景色的实例

2017/12/18 jQuery

微信小程序自定义组件封装及父子间组件传值的方法

2018/08/28 Javascript

vue实现多级菜单效果

2019/10/19 Javascript

深入理解Antd-Select组件的用法

2020/02/25 Javascript

Vue 的双向绑定原理与用法揭秘

2020/05/06 Javascript

[01:06:25]Secret vs Liquid 2018国际邀请赛淘汰赛BO3 第一场 8.25

2018/08/29 DOTA

Python实现带百分比的进度条

2016/06/28 Python

Python pymongo模块用法示例

2018/03/31 Python

Python实现抓取HTML网页并以PDF文件形式保存的方法

2018/05/08 Python

Windows系统下PhantomJS的安装和基本用法

2018/10/21 Python

将Pytorch模型从CPU转换成GPU的实现方法

2019/08/19 Python

python单向循环链表原理与实现方法示例

2019/12/03 Python

Python实现手机号自动判断男女性别(实例解析)

2019/12/22 Python

Python基于pillow库实现生成图片水印

2020/09/14 Python

解决pytorch 的state_dict()拷贝问题

2021/03/03 Python

咖啡为什么会有酸味？你喝到的咖啡為什麼是酸的？

2021/03/17 冲泡冲煮

排序都有哪几种方法？请列举。用JAVA实现一个快速排序

2014/02/16 面试题

18岁生日感言

2014/01/12 职场文书

暑期培训班策划方案

2014/08/26 职场文书

工作失误检讨书范文

2015/01/26 职场文书

运动会闭幕式通讯稿

2015/07/18 职场文书

趣味运动会口号

2015/12/24 职场文书

党校培训学习心得体会

2016/01/06 职场文书

五年级作文之成长

2019/09/16 职场文书

Python读取和写入Excel数据

2022/04/20 Python