解析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 相关文章推荐
建立良好体验度的Web注册系统ajax
Jul 09 Javascript
js刷新框架子页面的七种方法代码
Nov 20 Javascript
node.js中的fs.exists方法使用说明
Dec 17 Javascript
JS+CSS实现模仿浏览器网页字符查找功能的方法
Feb 26 Javascript
javascript数组去重方法汇总
Apr 23 Javascript
正则中的回溯定义与用法分析【JS与java实现】
Dec 27 Javascript
详解Vue中添加过渡效果
Mar 20 Javascript
js实现HTML中Select二级联动的实例
Jan 05 Javascript
修改npm全局安装模式的路径方法
May 15 Javascript
详解微信小程序scroll-view横向滚动的实践踩坑及隐藏其滚动条的实现
Mar 14 Javascript
vue如何获取自定义元素属性参数值的方法
May 14 Javascript
基于JavaScript实现留言板功能
Mar 16 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
Session的工作方式
2006/10/09 PHP
PHP 清空varnish 缓存的详解(包括指定站点下的)
2013/06/20 PHP
php配合jquery实现增删操作具体实例
2013/12/12 PHP
ThinkPHP使用心得分享-ThinkPHP + Ajax 实现2级联动下拉菜单
2014/05/15 PHP
PHP实现指定字段的多维数组排序函数分享
2015/03/09 PHP
编写PHP脚本清除WordPress头部冗余代码的方法讲解
2016/03/01 PHP
PHP面向对象程序设计类的定义与用法简单示例
2016/12/27 PHP
PHP正则验证字符串是否为数字的两种方法并附常用正则
2019/02/27 PHP
asp(javascript)全角半角转换代码 dbc2sbc
2009/08/06 Javascript
jQuery 1.5最新版本的改进细节分析
2011/01/19 Javascript
javascript学习笔记(九) js对象 设计模式
2012/06/19 Javascript
jquery实现移动端点击图片查看大图特效
2020/09/11 Javascript
jquery form表单获取内容以及绑定数据
2016/02/24 Javascript
JS验证不重复验证码
2017/02/10 Javascript
Extjs gridpanel 中的checkbox(复选框)根据某行的条件不能选中的解决方法
2017/02/17 Javascript
微信小程序手势操作之单触摸点与多触摸点
2017/03/10 Javascript
JavaScript实现QQ聊天消息展示和评论提交功能
2017/05/22 Javascript
JavaScript生成图形验证码
2020/08/24 Javascript
jquery的 filter()方法使用教程
2018/03/22 jQuery
jQuery-ui插件sortable实现自由拖动排序
2018/12/01 jQuery
ES6 如何改变JS内置行为的代理与反射
2019/02/11 Javascript
你不知道的SpringBoot与Vue部署解决方案
2020/11/09 Javascript
python中requests模块的使用方法
2015/04/08 Python
在Python中使用itertools模块中的组合函数的教程
2015/04/13 Python
Python简单爬虫导出CSV文件的实例讲解
2018/07/06 Python
Python的iOS自动化打包实例代码
2018/11/22 Python
美国顶尖折扣时尚购物网:Bluefly
2016/08/28 全球购物
SQL SERVER面试资料
2013/03/30 面试题
毕业生动漫设计求职信
2013/10/11 职场文书
群众路线教育实践活动方案
2014/02/02 职场文书
马丁路德金演讲稿
2014/05/19 职场文书
2015年教师党员承诺书
2015/04/27 职场文书
项目投资意向书范本
2015/05/09 职场文书
工作服管理制度范本
2015/08/06 职场文书
vue项目多环境配置(.env)的实现
2021/07/21 Vue.js
详解使用内网穿透工具Ngrok代理本地服务
2022/03/31 Servers