sha1、childNodes

     
         
      
         
       Document  
       
          window.οnlοad=function(){   var ou=document.getElementById('ul1')   // console.log(ou.childNodes.length)   // childNodes包括文本节点、元素节点   // alert(ou.childNodes.length)   // alert(ou.children.length)  --- 常用          for (var i = ou.childNodes.length - 1; i >= 0; i--) {    // nodeType==3 ->  文本节点    // nodeType==1 ->  元素节点    // alert(ou.childNodes[i].nodeType)     if(ou.childNodes[i].nodeType==1){     ou.childNodes[i].style.background='red'    }   }  }    
          
        
            
         
  • 我是元素节点
    •    
             
  •    
             
  •    
             
  •    
             
  •     我是文本节点 

    2、DOM操作元素

         
              
          
               
           Document    
           
                    window.οnlοad=function(){            var ot=document.getElementById('t1')            var ob=document.getElementById('b1')            ob.οnclick=function(){                // ot.value='元素操作第一种方法：style'                // ot['value']='元素操作第二种方法'                ot.setAttribute('value','元素操作第三种方法：DOM')            }        }        
            
                 

    3、className操作元素

                
         
                  
          
                   
                   
           
                    
            
                         //getByClass()：通过class选取元素            function getByClass(oParent,sClass){                var aResult=[]                var aElement=oParent.getElementsByTagName('*')                for (var i = aElement.length - 1; i >= 0; i--) {                    if(aElement[i].className=sClass){                        aResult.push(aElement[i])                    }                }                return aResult            }            window.οnlοad=function(){                var oul1=document.getElementById('ul1')                // var ali=oul1.getElementsByTagName('li')                // for (var i = oul1.length - 1; i >= 0; i--) {                //     if(ali[i].className=="box"){                //         ali[i].style.background='red'                //     }                // }                var aBox=getByClass(oul1,'box')                for (var i = aBox.length - 1; i >= 0; i--) {                    aBox[i].style.background='red'                }            }                        
             
                          
              
                           
               
                            
                
  •             
                
                             
                 
  •             
                 
  •             

    4、DOM创建元素

         
              
          
               
           Document    
               
           
                
            
                 
             
                          

    5、DOM插入元素

         
              
          
               
           Document    
               
           
                
            
                 
             
                          

    6、DOM删除元素

         
              
          
               
           Document    
               
           
                    
            
  • 1
             
              删除
             
    •         
            
  • 22
             
              删除
             
    •         
            
  • 333
             
              删除
             
    •         
            
  • 4444
             
              删除
             
    •         
            
  • 55555
             
              删除
             
    •         
            
  • 666666
             
              删除
             
    •     

    7、文档碎片，使用较少

         
              
          
               
           Document