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

JavaScript中的Screen屏幕对象

Jan 16 Javascript

Extjs学习笔记之四工具栏和菜单

Jan 07 Javascript

jquery命令汇总,方便使用jquery的朋友

Jun 26 Javascript

thinkphp实现无限分类（使用递归）

Dec 19 Javascript

jQuery EasyUI框架中的Datagrid数据表格组件结构详解

Jun 09 Javascript

JS一个简单的注册页面实例

Sep 05 Javascript

详解vue-cli中的ESlint配置文件eslintrc.js

Sep 25 Javascript

Vue前端开发规范整理(推荐)

Apr 23 Javascript

使用vue 国际化i18n 实现多实现语言切换功能

Oct 11 Javascript

VUE基于NUXT的SSR 服务端渲染

Nov 30 Javascript

vue 中 beforeRouteEnter 死循环的问题

Apr 23 Javascript

vue实现的多页面项目如何优化打包的步骤详解

Jul 19 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

德生PL330的评价与改造

2021/03/02 无线电

如何使用Gitblog和Markdown建自己的博客

2015/07/31 PHP

浅谈PHP中的面向对象OOP中的魔术方法

2017/06/12 PHP

使用正则替换变量

2007/05/05 Javascript

javascript中的数字与字符串相加实例分析

2011/08/14 Javascript

js防止表单重复提交实现代码

2012/09/05 Javascript

JQuery 常用方法和事件详细介绍

2013/04/18 Javascript

javascript实现跳转菜单的具体方法

2013/07/05 Javascript

IE下window.onresize 多次调用与死循环bug处理方法介绍

2013/11/12 Javascript

iScroll中事件点击触发两次解决方案

2015/03/11 Javascript

javascript实现动态统计图开发实例

2015/11/21 Javascript

详解iframe与frame的区别

2016/01/13 Javascript

Javascript的表单验证-揭开正则表达式的面纱

2016/03/18 Javascript

bootstrap网页框架的使用方法

2016/05/10 Javascript

three.js快速入门【推荐】

2017/01/21 Javascript

ES6生成器用法实例分析

2017/04/10 Javascript

简单谈谈JS中的正则表达式

2017/09/11 Javascript

Nodejs+express+ejs简单使用实例代码

2017/09/18 NodeJs

vue的全局变量和全局拦截请求器的示例代码

2018/09/13 Javascript

vue组件通信传值操作示例

2019/01/08 Javascript

面试题：react和vue的区别分析

2019/04/08 Javascript

浅析JS中NEW的实现原理及重写

2020/02/20 Javascript

如何实现js拖拽效果及原理解析

2020/05/08 Javascript

Postman如何实现参数化执行及断言处理

2020/07/28 Javascript

Python实现通过文件路径获取文件hash值的方法

2017/04/29 Python

python密码错误三次锁定(实例讲解)

2017/11/14 Python

Pycharm设置界面全黑的方法

2018/05/23 Python

win8下python3.4安装和环境配置图文教程

2018/07/31 Python

Python绘制的二项分布概率图示例

2018/08/22 Python

python字符串切割:str.split()与re.split()的对比分析

2019/07/16 Python

css3弹性盒模型（Flexbox）详细介绍

2014/10/08 HTML / CSS

大二学年个人总结

2015/03/03 职场文书

毕业设计答辩开场白

2015/05/29 职场文书

公司安全管理制度范本

2015/08/05 职场文书

大学生安全教育心得体会

2016/01/15 职场文书

Win11如何查看显卡型号 Win11查看显卡型号的方法

2022/08/14 数码科技