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