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

좋은 웹페이지 즐겨찾기