解析dom中的children对象数组元素firstChild,lastChild的使用

代码如下:

<!--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

赞 (0)

相关推荐

  • 解析dom中的children对象数组元素firstChild,lastChild的使用

    复制代码 代码如下: <!--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

  • 解析PHP函数array_flip()在重复数组元素删除中的作用

    我们都知道,PHP中的数组元素删除的方式可以有很多种,经常用到的函数有php中array_unique().那么我们今天为大家介绍的PHP函数array_flip()在删除数组重复元素时的效率要比array_unique()函数高出大约5倍左右.PHP函数array_flip()格式: 复制代码 代码如下: array array_flip ( array trans ) //array_flip -- 交换数组中的键和值 array array_flip ( array trans ) //a

  • 深入解析PHP中foreach语句控制数组循环的用法

    foreach是PHP中很常用的一个用作数组循环的控制语句. 因为它的方便和易用,自然也就在后端隐藏着很复杂的具体实现方式(对用户透明) 今天,我们就来一起分析分析,foreach是如何实现数组(对象)的遍历的. 我们知道PHP是一个脚本语言,也就是说,用户编写的PHP代码最终都是会被PHP解释器解释执行, 特别的,对于PHP来说,所有的用户编写的PHP代码,都会被翻译成PHP的虚拟机ZE的虚拟指令(OPCODES)来执行,不论细节的话,就是说,我们所编写的任何PHP脚本,都会最终被翻译成一条条

  • jquery操作对象数组元素方法详解

    代码如下: 复制代码 代码如下: <div id="div1">      <span>a</span>      <span>b</span>      <span>c</span>  </div> 1.错误方式:不能用[]方式取jquery对象数组,如下: 复制代码 代码如下: $(function() {      var div_span = $("#div1 span&q

  • 深入解析JavaScript中的arguments对象

    arguments定义 所有的函数都有一个自己的arguments对象,用来储存它实际接受到的参数,而不局限于函数声明时所定义的参数列表.它不是数组却类似数组,具有数组一样的访问性质及方式,可以由arguments[n]来访问对应的单个参数的值,并拥有数组长度属性length.但是却不具有数组的一些方法.可以通过call把arguments转化成真正的数组,然后进行数组的操作. var args = Array.prototype.slice.call(arguments); 类数组 1. 判断

  • 解析React 中的Virtual DOM

    解析React 中的Virtual DOM

    React在前端界一直很流行,而且学起来也不是很难,只需要学会JSX.理解State和Props,然后就可以愉快的玩耍了,但想要成为React的专家你还需要对React有一些更深入的理解,希望本文对你有用. React在前端界一直很流行,而且学起来也不是很难,只需要学会JSX.理解State和Props,然后就可以愉快的玩耍了,但想要成为React的专家你还需要对React有一些更深入的理解,希望本文对你有用. 这是Choerodon的一个前端页面 在复杂的前端项目中一个页面可能包含上百个状态,

  • 详解C++中的对象指针与对象数组

    C++对象指针 指向对象的指针 在建立对象时,编译系统会为每一个对象分配一定的存储空间,以存放其成员.对象空间的起始地址就是对象的指针.可以定义一个指针变量,用来存放对象的指针. 如果有一个类: class Time { public : int hour; int minute; int sec; void get_time( ); }; void Time::get_time( ) { cout<<hour<<":"<<minute<<

  • Perl中的列表和数组学习笔记

    一.列表 列表是包含在括号里的一序列的值,可以为任何数值,也可为空,如:(1, 5.3 , "hello" , 2),空列表:(). 注:只含有一个数值的列表(如:(43.2) )与该数值本身(即:43.2 )是不同的,但它们可以互相转化或赋值.列表例: 复制代码 代码如下: (17, $var, "a string")     (17, 26 << 2)     (17, $var1 + $var2) ($value, "The answer

  • 在Bash脚本中创建和使用数组方法总结

    在Bash中定义一个数组 有两种方法可以在bash脚本中创建新数组.第一个是使用declare命令来定义一个Array.此命令将定义名为test_array的关联数组. $ declare -a test_array 还可以通过分配元素来创建数组. $ test_array=(apple orange lemon) 访问数组元素 与其他编程语言类似,bash数组元素可以使用索引号从0开始,然后从1.2.3-n开始访问.这也适用于索引号为数字的关联数组. $ echo ${test_array[0

  • js基础之DOM中元素对象的属性方法详解

    js基础之DOM中元素对象的属性方法详解

    在 HTML DOM (文档对象模型)中,每个部分都是节点. 节点是DOM结构中最基本的组成单元,每一个HTML标签都是DOM结构的节点. 文档是一个    文档节点 . 所有的HTML元素都是    元素节点 所有 HTML 属性都是    属性节点 文本插入到 HTML 元素是    文本节点 注释是    注释节点. 最基本的节点类型是Node类型,其他所有类型都继承自Node,DOM操作往往是js中开销最大的部分,因而NodeList导致的问题最多.要注意:NodeList是'动态的',

随机推荐