解析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 相关文章推荐
网页里控制图片大小的相关代码
Jun 13 Javascript
jQuery表格插件datatables用法总结
Sep 05 Javascript
js获取微信版本号的方法
May 12 Javascript
JS与Ajax Get和Post在使用上的区别实例详解
Jun 08 Javascript
JavaScript使用键盘输入控制实现数字验证功能
Aug 19 Javascript
浅谈js基础数据类型和引用类型,深浅拷贝问题,以及内存分配问题
Sep 02 Javascript
vue2导航根据路由传值,而改变导航内容的实例
Nov 10 Javascript
微信小程序canvas实现刮刮乐效果
Jul 09 Javascript
Angular路由ui-router配置详解
Aug 01 Javascript
laypage+SpringMVC实现后端分页
Jul 27 Javascript
ElementUI中el-tree节点的操作的实现
Feb 27 Javascript
JS出现404错误原理及解决方案
Jul 01 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/11/08 PHP
php 不使用js实现页面跳转
2014/02/11 PHP
PHP基于DateTime类解决Unix时间戳与日期互转问题【针对1970年前及2038年后时间戳】
2018/06/13 PHP
用cssText批量修改样式
2009/08/29 Javascript
js点击更换背景颜色或图片的实例代码
2013/06/25 Javascript
javascript 判断整数方法分享
2014/12/16 Javascript
IONIC自定义subheader的最佳解决方案
2016/09/22 Javascript
Bootstrap3 datetimepicker控件使用实例
2016/12/13 Javascript
Node.JS循环删除非空文件夹及子目录下的所有文件
2018/03/12 Javascript
微信小程序自定义select下拉选项框组件的实现代码
2018/08/28 Javascript
Vue利用History记录上一页面的数据方法实例
2018/11/02 Javascript
JS Math对象与Math方法实例小结
2019/07/05 Javascript
vue实现弹幕功能
2019/10/25 Javascript
小程序识别身份证,银行卡,营业执照,驾照的实现
2019/11/05 Javascript
mpvue 项目初始化及实现授权登录的实现方法
2020/07/20 Javascript
[06:35]2014DOTA2国际邀请赛 老男孩梦圆西雅图中国军团世界最强
2014/07/22 DOTA
在Python中使用poplib模块收取邮件的教程
2015/04/29 Python
Python编程中字符串和列表的基本知识讲解
2015/10/14 Python
Python实现读取及写入csv文件的方法示例
2018/01/12 Python
详解python3中的真值测试
2018/08/13 Python
Django重置migrations文件的方法步骤
2019/05/01 Python
python实现远程控制电脑
2019/05/23 Python
python itchat给指定联系人发消息的方法
2019/06/11 Python
Python爬虫图片懒加载技术 selenium和PhantomJS解析
2019/09/18 Python
Python paramiko 模块浅谈与SSH主要功能模拟解析
2020/02/29 Python
CSS3实现闪烁动画效果的方法
2015/02/09 HTML / CSS
英国IT硬件供应商,定制游戏PC:Mesh Computers
2019/03/28 全球购物
2013英文求职信模板范文
2013/11/15 职场文书
企业行政文员岗位职责
2013/12/03 职场文书
开业典礼主持词
2014/03/21 职场文书
青奥会口号
2014/06/12 职场文书
毕业生个人自荐书
2015/03/05 职场文书
2015教师个人工作总结范文
2015/03/31 职场文书
八年级作文之我的母亲
2019/12/10 职场文书
pytorch 使用半精度模型部署的操作
2021/05/24 Python
Java实现扫雷游戏详细代码讲解
2022/05/25 Java/Android