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

强制设为首页代码

Jun 19 Javascript

event对象的方法兼容多浏览器

Jun 27 Javascript

jquery中的sortable排序之后的保存状态的解决方法

Jan 28 Javascript

js判断是否为数组的函数: isArray()

Oct 30 Javascript

jQuery页面图片伴随滚动条逐渐显示的小例子

Mar 21 Javascript

在jQuery中处理XML数据的大致方法

Aug 14 Javascript

Boostrap入门准备之border box

May 09 Javascript

浅谈JavaScript中的apply/call/bind和this的使用

Feb 26 Javascript

详解ElementUI之表单验证、数据绑定、路由跳转

Jun 21 Javascript

Vue-CLI 项目在pycharm中配置方法

Aug 30 Javascript

JS中类的静态方法，静态变量，实例方法，实例变量区别与用法实例分析

Mar 14 Javascript

element 动态合并表格的步骤

Dec 31 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生成迅雷、快车、旋风等软件的下载链接代码实例

2014/05/12 PHP

如何在HTML 中嵌入 PHP 代码

2015/05/13 PHP

用php代码限制国内IP访问我们网站

2015/09/26 PHP

PHP开发中AJAX技术的简单应用

2015/12/11 PHP

PHP中如何判断exec函数执行成功？

2016/08/04 PHP

WordPress 插件——CoolCode使用方法与下载

2007/07/02 Javascript

给Flash加一个超链接(推荐使用透明层)兼容主流浏览器

2013/06/09 Javascript

js判断IE浏览器版本过低示例代码

2013/11/22 Javascript

jQuery在页面加载时动态修改图片尺寸的方法

2015/03/20 Javascript

用jQuery的AJax实现异步访问、异步加载

2016/11/02 Javascript

JS动态生成年份和月份实例代码

2017/02/04 Javascript

js HTML5 canvas绘制图片的方法

2017/09/08 Javascript

jQuery实现仿京东防抖动菜单效果示例

2018/07/06 jQuery

node.js的Express服务器基本使用教程

2019/01/09 Javascript

Node.JS枚举统计当前文件夹和子目录下所有代码文件行数

2019/08/23 Javascript

[01:14:05]《加油DOTA》第四期

2014/08/25 DOTA

Python os模块中的isfile()和isdir()函数均返回false问题解决方法

2015/02/04 Python

python开发之IDEL(Python GUI)的使用方法图文详解

2015/11/12 Python

python实现爬虫统计学校BBS男女比例之数据处理（三）

2015/12/31 Python

Python实现多线程抓取网页功能实例详解

2017/06/08 Python

Python编程之黑板上排列组合，你舍得解开吗

2017/10/30 Python

浅析PHP与Python进行数据交互

2018/05/15 Python

Python利用sqlacodegen自动生成ORM实体类示例

2019/06/04 Python

基于python的Paxos算法实现

2019/07/03 Python

Python编写一个验证码图片数据标注GUI程序附源码

2019/12/09 Python

python实现12306登录并保存cookie的方法示例

2019/12/17 Python

python 第三方库paramiko的常用方式

2021/02/20 Python

会计专业毕业生自我评价

2013/09/25 职场文书

会计学自我鉴定

2014/02/06 职场文书

《要下雨了》教学反思

2014/02/17 职场文书

产品销售计划书

2014/05/04 职场文书

温馨提示标语

2014/06/26 职场文书

三严三实对照检查材料范文

2014/09/23 职场文书

应届生求职自荐信范文

2015/03/04 职场文书

酒店总经理岗位职责

2015/04/01 职场文书

java基础——多线程

2021/07/03 Java/Android