0
点赞
收藏
分享

微信扫一扫

JavaScrip学习笔记(四)---DOM基础


一、子节点


     1、元素节点、文本节点


    


     实例01

html 

 
 
 
 
<body>
 
<ul id="ul1">
 
文本节点1 <li></li>
 
文本节点2<li></li>
 
文本节点3<li></li>
 
文本节点4<li></li>
 
文本节点5<li></li>
 
文本节点6</ul>
 
<!--文本节点 adsasda-->
 
<!--<span>元素节点  qeqweq </span>-->
 
</body>
 

 

  script 

 
 
 
 
< 
 script 
 > 
 
     
 window. 
 onload= 
 function(){ 
 
       
 var  
 oUl= 
 document. 
 getElementById( 
 'ul1'); 
 
         
 alert( 
 oUl. 
 childNodes. 
 length); 
 
     }; 
 
</script>

JavaScrip学习笔记(四)---DOM基础_javascript




2、nodeType属性


               


常见节点

nodeType值

元素节点

1

属性节点

2

文本节点

3


实例02


< 
 script 
 > 
 
     
 window. 
 onload= 
 function(){ 
 
         
 var  
 oUl= 
 document. 
 getElementById( 
 'ul1'); 
 
for(var i=0;i<oUl.childNodes.length;i++){
 
              
 if( 
 oUl. 
 childNodes[ 
 i]. 
 nodeType== 
 1){ 
 
               
 oUl. 
 childNodes[ 
 i]. 
 style. 
 background= 
 'red'; 
 
              } 
 
         }
 

      }; 

 
</script>


JavaScrip学习笔记(四)---DOM基础_html_02





3、children获取元素节点


实例03


html代码

< 
 ul  
 id= 
 "ul1" 
 > 
 
     
 < 
 li 
 > 
 
         
 <!-- 
 子节点只算第一层的,在这里 
 span 
 是 
 li 
 的子节点,而不是 
 ul 
 的子节点 
 --> 
         
  < 
 span 
 > 
 子节点 
 </ 
 span 
 > 
 
     
 </ 
 li 
 > 
 
     
 < 
 li 
 ></ 
 li 
 > 
</ul>


javascript代码

< 
 script 
 > 
 
     
 window. 
 onload= 
 function(){ 
 
         
 var  
 oUl= 
 document. 
 getElementById( 
 'ul1'); 
 
         
 //children 
 获取元素节点 
         
 //alert(oUl.children.length); 
         
  for( 
 var  
 i= 
 0; 
 i< 
 oUl. 
 children. 
 length; 
 i++){ 
 
             
 oUl. 
 children[ 
 i]. 
 style. 
 background= 
 'red'; 
 
         } 
 
     }; 
 
</script>






二、父节点



实例04


html代码


< 
  script 
  > 
  
     
  window. 
  onload= 
  function(){ 
  
         
  var  
  oUl= 
  document. 
  getElementById( 
  'ul1'); 
  
         
  alert( 
  oUl. 
  parentNode); 
  
     }; 
  
</ 
  script 
  >


javascript代码


< 
  script 
  > 
  
     
  window. 
  onload= 
  function(){ 
  
         
  var  
  oUl= 
  document. 
  getElementById( 
  'ul1'); 
  
         
  alert( 
  oUl. 
  parentNode); 
  
     }; 
  
</ 
  script 
  >


JavaScrip学习笔记(四)---DOM基础_javascript_03




实例05 父节点的应用


html代码

< 
  ul  
  id= 
  "ul1" 
  > 
  
     
  < 
  li 
  > 
  父节点1  
  < 
  a  
  href= 
  "javascript:;" 
  > 
  隐藏 
  </ 
  a 
  ></ 
  li 
  > 
  
     
  < 
  li 
  > 
  父节点2  
  < 
  a  
  href= 
  "javascript:;" 
  > 
  隐藏 
  </ 
  a 
  ></ 
  li 
  > 
  
     
  < 
  li 
  > 
  父节点3  
  < 
  a  
  href= 
  "javascript:;" 
  > 
  隐藏 
  </ 
  a 
  ></ 
  li 
  > 
  
     
  < 
  li 
  > 
  父节点4  
  < 
  a  
  href= 
  "javascript:;" 
  > 
  隐藏 
  </ 
  a 
  ></ 
  li 
  > 
  
     
  < 
  li 
  > 
  父节点5  
  < 
  a  
  href= 
  "javascript:;" 
  > 
  隐藏 
  </ 
  a 
  ></ 
  li 
  > 
  
     
  < 
  li 
  > 
  父节点6  
  < 
  a  
  href= 
  "javascript:;" 
  > 
  隐藏 
  </ 
  a 
  ></ 
  li 
  > 
  
     
  < 
  li 
  > 
  父节点7  
  < 
  a  
  href= 
  "javascript:;" 
  > 
  隐藏 
  </ 
  a 
  ></ 
  li 
  > 
  

</ 
  ul 
  >


javascript代码


< 
  script 
  > 
  
     
  /* window.οnlοad=function(){ 
          var oUl=document.getElementById('ul1'); 
          alert(oUl.parentNode); 
      };*/ 
      
  window. 
  onload= 
  function(){ 
  
         
  var  
  oA= 
  document. 
  getElementsByTagName( 
  'a'); 
  
         
  for( 
  var  
  i= 
  0; 
  i< 
  oA. 
  length; 
  i++){ 
  
             
  oA[ 
  i]. 
  onclick= 
  function(){ 
  
                 
  this. 
  parentNode. 
  style. 
  display= 
  'none'; 
  
            }; 
  
        } 
  
    }; 
  

</ 
  script 
  >


   


JavaScrip学习笔记(四)---DOM基础_dom_04


三、firstChild


<!DOCTYPE   html  > 
 
<  html   lang=  "en"  > 
 
<  head  > 
 
      < 
 meta   charset=  "UTF-8"  > 
 
      < 
 title  ></ 
 title  > 
 
      < 
 script  > 
 

          window.  onload= 
 function(){  
              var   oUl= 
 document.  getElementById( 
 'ou1');  

              //IE6-8             //oUl.firstChild.style.background='red';             //  高级浏览器               //oUl.firstElementChild.style.background='red';             //  兼容               if(  oUl. 
 firstElementChild){  
                  oUl. 
 firstElementChild.  style.  background=  'red';  
            }  
              else{  
                  oUl. 
 firstChild.  style.  background=  'red';  
            }  
        };  
      </ 
 script  > 
 
</  head  > 
 
<  body  > 
 
      < 
 ul   id=  "ou1"  > 
 
          < 
 li  >1 
 </ 
 li  > 
 
          < 
 li  >2 
 </ 
 li  > 
 
          < 
 li  >3 
 </ 
 li  > 
 
      </ 
 ul  > 
 
</  body  > 
</html>


四、通过class类获取元素、以及函数封装

<!DOCTYPE    html   > 
  
<   html    lang=   "en"   > 
  
<   head   > 
  
       < 
  meta    charset=   "UTF-8"   > 
  
       < 
  title   ></ 
  title   > 
  
       < 
  script   > 
  
           function    getByClass(oParent,sClass){ 
  
               var    aResult=[]; 
  
               var    aEle=oParent. 
  getElementsByTagName( 
  '*');   
               for(   var    i= 
  0; 
  i< 
  aEle. 
  length;   i++){ 
  
                   if(   aEle[ 
  i]. 
  className==sClass){   
                       aResult. 
  push( 
  aEle[ 
  i]); 
  
                 }   
             }   
               return    aResult; 
  
         }   

           window.   onload= 
  function(){   
               var    oUL= 
  document.   getElementById( 
  'ul1');   
               var    aBox= 
  getByClass( 
  oUL, 
  'box');   
               for(   var    i= 
  0; 
  i< 
  aBox. 
  length;   i++){ 
  
                   aBox[ 
  i]. 
  style.   background=   'red';   
             }   
         };   
       </ 
  script   > 
  
</   head   > 
  
<   body   > 
  
<   ul    id=   "ul1"   > 
  
       < 
  li    class=   "box"   ></ 
  li   > 
  
       < 
  li    class=   "box"   ></ 
  li   > 
  
       < 
  li   ></ 
  li   > 
  
       < 
  li   ></ 
  li   > 
  
       < 
  li    class=   "box"   ></ 
  li   > 
  
       < 
  li   ></ 
  li   > 
  
</   ul   > 
  
</   body   > 
  
</   html   >

举报

相关推荐

0 条评论