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

jquery lazyload延迟加载技术的实现原理分析

Jan 24 Javascript

JavaScript高级程序设计（第3版）学习笔记7 js函数（上）

Oct 11 Javascript

javascript跟随滚动效果插件代码（javascript Follow Plugin）

Aug 03 Javascript

简介JavaScript中的setHours()方法的使用

Jun 11 Javascript

JS实现选择TextArea内文本的方法

Aug 03 Javascript

JS模拟的Map类实现方法

Jun 17 Javascript

jQuery实现动态添加、删除按钮及input输入框的方法

Apr 27 jQuery

laypage+SpringMVC实现后端分页

Jul 27 Javascript

jQuery实现提交表单时不提交隐藏div中input的方法

Oct 08 jQuery

使用vue-router切换页面时实现设置过渡动画

Oct 31 Javascript

JS桶排序的简单理解与实现方法示例

Nov 25 Javascript

Webpack5正式发布,有哪些新特性

Oct 12 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/10/09 PHP

PHP写入WRITE编码为UTF8的文件的实现代码

2008/07/07 PHP

初识laravel5

2015/03/02 PHP

解决php表单重复提交实现方法

2015/09/29 PHP

微信支付开发交易通知实例

2016/07/12 PHP

PHP超级全局变量【$GLOBALS，$_SERVER，$_REQUEST等】用法实例分析

2019/12/11 PHP

js 效率组装字符串 StringBuffer

2009/12/23 Javascript

JavaScript中数组对象的那些自带方法介绍

2013/03/12 Javascript

JavaScript 函数参数是传值(byVal)还是传址(byRef) 分享

2013/07/02 Javascript

自动设置iframe大小的jQuery代码

2013/09/11 Javascript

JQuery与JS里submit()的区别示例介绍

2014/02/17 Javascript

js时间日期格式化封装函数

2014/12/02 Javascript

原生js实现addclass,removeclass,toggleclasss实例

2016/11/24 Javascript

微信小程序如何调用图片接口API并居中显示

2019/06/29 Javascript

解决layui弹框失效的问题

2019/09/09 Javascript

在Python中使用NLTK库实现对词干的提取的教程

2015/04/08 Python

Django发送html邮件的方法

2015/05/26 Python

Python数据分析:手把手教你用Pandas生成可视化图表的教程

2018/12/15 Python

基于Python实现ComicReaper漫画自动爬取脚本过程解析

2019/11/11 Python

python支持多线程的爬虫实例

2019/12/21 Python

将python包发布到PyPI和制作whl文件方式

2019/12/25 Python

Python列表嵌套常见坑点及解决方案

2020/09/30 Python

Python实现壁纸下载与轮换

2020/10/19 Python

美国高端婴童品牌：Hanna Andersson

2016/10/30 全球购物

广告学专业推荐信范文

2013/11/23 职场文书

小学少先队活动方案

2014/02/18 职场文书

《郑和远航》教学反思

2014/04/16 职场文书

国际商务专业毕业生自我鉴定2014

2014/09/27 职场文书

党的群众路线教育实践活动领导班子整改措施

2014/09/30 职场文书

银行职员工作失误检讨书

2014/10/14 职场文书

安阳殷墟导游词

2015/02/10 职场文书

自主招生英文自荐信

2015/03/25 职场文书

西游降魔篇观后感

2015/06/15 职场文书

HTML中table表格拆分合并(colspan、rowspan)

2021/04/07 HTML / CSS

python-for x in range的用法(注意要点、细节)

2021/05/10 Python

如何用PHP实现分布算法之一致性哈希算法

2021/05/26 PHP