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

ie下jquery.getJSON的缓存问题的处理方法

Mar 29 Javascript

js中的replace方法使用介绍

Oct 28 Javascript

JS原型、原型链深入理解

Feb 27 Javascript

Javascript中prototype的使用详解

Jun 18 Javascript

响应式表格之固定表头的简单实现

Aug 26 Javascript

深入对Vue.js $watch方法的理解

Mar 20 Javascript

基于Node.js实现压缩和解压缩的方法

Feb 13 Javascript

vue element-ui 绑定@keyup事件无效的解决方法

Mar 09 Javascript

在微信小程序中保存网络图片

Feb 12 Javascript

bootstrap table.js动态填充单元格数据的多种方法

Jul 18 Javascript

JavaScript字符串处理常见操作方法小结

Nov 15 Javascript

JS通用方法触发点击事件代码实例

Feb 17 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动态变静态原理

2006/11/25 PHP

php中利用post传递字符串重定向的实现代码

2011/04/21 PHP

Windows下部署Apache+PHP+MySQL运行环境实战

2012/08/31 PHP

php函数array_merge用法一例(合并同类数组)

2013/02/03 PHP

PHP中调用SVN命令更新网站方法

2015/01/07 PHP

PHP将二维数组某一个字段相同的数组合并起来的方法

2016/02/26 PHP

PHP 使用位运算实现四则运算的代码

2021/03/09 PHP

IE浏览器打印的页眉页脚设置解决方法

2009/12/08 Javascript

jquery UI 1.72 之datepicker

2009/12/29 Javascript

Javascript的闭包

2009/12/31 Javascript

javascript学习笔记（五）正则表达式

2011/04/08 Javascript

Javascript 面向对象（三）接口代码

2012/05/23 Javascript

只需一行代码,轻松实现一个在线编辑器

2013/11/12 Javascript

JavaScript子类用Object.getPrototypeOf去调用父类方法解析

2013/12/05 Javascript

javascript 实现子父窗体互相传值的简单实例

2014/02/17 Javascript

javascript 寻找错误方法整理

2014/06/15 Javascript

JavaScript监听文本框回车事件并过滤文本框空格的方法

2015/04/16 Javascript

jQuery插件扩展实例【添加回调函数】

2016/11/26 Javascript

layer.close()关闭进度条和Iframe窗的方法

2018/08/17 Javascript

JS实现网站楼层导航效果代码实例

2020/06/16 Javascript

vue添加锚点,实现滚动页面时锚点添加相应的class操作

2020/08/10 Javascript

jQuery实现简单全选框

2020/09/13 jQuery

[02:28]DOTA2 2017国际邀请赛小组赛回顾

2017/08/09 DOTA

在Python中操作字典之clear()方法的使用

2015/05/21 Python

浅谈pandas中DataFrame关于显示值省略的解决方法

2018/04/08 Python

很酷的python表白工具你喜欢我吗

2019/04/11 Python

Python变量格式化输出实现原理解析

2020/08/06 Python

大学生的自我鉴定范文

2014/01/21 职场文书

管理学院毕业生自荐信范文

2014/03/10 职场文书

学校地质灾害防治方案

2014/06/10 职场文书

2014年酒店服务员工作总结

2014/12/08 职场文书

超市食品安全承诺书

2015/04/29 职场文书

沂蒙六姐妹观后感

2015/06/08 职场文书

水浒传读书笔记

2015/06/25 职场文书

2016天猫双十一广告语

2016/01/28 职场文书

MySQL系列之十一日志记录

2021/07/02 MySQL