解析dom中的children对象数组成分firstChild,lastChild的

作者: 今晚开什么码  发布:2019-09-14

复制代码 代码如下:

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

本文由今晚开什么码发布于今晚开什么码,转载请注明出处:解析dom中的children对象数组成分firstChild,lastChild的

关键词:

上一篇:实例方法
下一篇:没有了