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

div移动输入框不能输入的问题

Nov 19 Javascript

jQuery validate 中文API 附validate.js中文api手册

Jul 31 Javascript

js菜单点击显示或隐藏效果的简单实例

Jan 13 Javascript

input标签内容改变的触发事件介绍

Jun 18 Javascript

js实现内容显示并使用json传输数据

Mar 16 Javascript

深入分析javascript中的错误处理机制

Jul 17 Javascript

同步文本框内容JS代码实现

Aug 04 Javascript

网络传输协议（http协议）

Nov 18 Javascript

浅谈Vue CLI 3结合Lerna进行UI框架设计

Apr 14 Javascript

websocket4.0+typescript 实现热更新的方法

Aug 14 Javascript

Nuxt v-bind绑定img src不显示的解决

Dec 05 Javascript

JavaScript监听一个DOM元素大小变化

Apr 26 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

phpmyadmin的#1251问题

2006/11/25 PHP

PHP 开发环境配置（Zend Studio）

2010/04/28 PHP

php中防止恶意刷新页面的代码小结

2012/10/31 PHP

Yii框架常见缓存应用实例小结

2019/09/09 PHP

在textarea文本域中显示HTML代码的方法

2007/03/06 Javascript

JS 创建对象(常见的几种方法)

2008/11/03 Javascript

JavaScript高级程序设计阅读笔记（十四） js继承机制的实现

2012/08/14 Javascript

js实现全屏漂浮广告移入光标停止移动

2013/12/02 Javascript

浅谈JavaScript函数参数的可修改性问题

2013/12/05 Javascript

jQuery实现多按钮单击变色

2014/11/27 Javascript

JavaScript中的原型链prototype介绍

2014/12/30 Javascript

Jquery 实现grid绑定模板

2015/01/28 Javascript

简介JavaScript中POSITIVE_INFINITY值的使用

2015/06/05 Javascript

基于jQuery实现搜索关键字自动匹配功能

2020/03/26 Javascript

特殊日期提示功能的实现方法

2016/06/16 Javascript

jQuery解决$符号命名冲突

2016/06/18 Javascript

详解Jquery的事件操作和文档操作

2016/12/19 Javascript

Angular使用Md5加密的解决方法

2017/09/16 Javascript

详解如何用模块化的方式写vuejs

2017/12/16 Javascript

微信小程序实现循环动画效果

2018/07/16 Javascript

layer.open回调获取弹出层参数的实现方法

2019/09/10 Javascript

详解element上传组件before-remove钩子问题解决

2020/04/08 Javascript

微信小程序实现倒计时功能

2020/11/19 Javascript

[01:57]2018年度DOTA2最具潜力解说-完美盛典

2018/12/16 DOTA

批处理与python代码混合编程的方法

2016/05/19 Python

用Python写一个无界面的2048小游戏

2016/05/24 Python

详解Swift中属性的声明与作用

2016/06/30 Python

Jupyter notebook命令和编辑模式常用快捷键汇总

2020/11/17 Python

下列程序在32位linux或unix中的结果是什么

2015/01/26 面试题

AJAX的全称是什么

2012/11/06 面试题

医院护士的求职信范文

2013/12/26 职场文书

青年教师培训方案

2014/02/06 职场文书

院党委组织查摆问题对照检查材料思想汇报2014

2014/10/08 职场文书

职工培训工作总结

2015/08/10 职场文书

导游词之黄帝陵景区

2019/09/16 职场文书

python爬虫之selenium库的安装及使用教程

2021/05/23 Python