javascript html 요 소 를 가 져 오 는 몇 가지 방법

4433 단어 Javascript
1. id 로 html 요 소 를 가 져 오기



    
    


<div id="mydiv" style="border:1px solid red">  div,  id mydiv</div>
<script>
    var x=document.getElementById("mydiv").innerHTML;
    document.write(x+"(    javascript   )");
</script>

</code></pre> 
  <br/> 2.  class   html   
   
  <p> 1)       </p> 
   
  <pre><code>


    <meta charset="UTF-8"/>
    <title/>


<p style="border:1px solid red" class="aaa">  p,     aaa</p>
<span style="border:1px solid red" class="aaa">  span,     aaa</span>
<script>
   function getByClass(iclass){  //    
       var Result=[];//       
       var allElement=document.getElementsByTagName("*"); //      
//             ,          ,        Result   
       for(var i=0;i<allElement.length;i++){
           if(allElement[i].className==iclass){
               Result.push(allElement[i]);
           }
       }
       return Result;  //        
   }
//             
    window.οnlοad=function(){
        var arr= getByClass("aaa");
//                
        for(var i=0;i<arr.length;i++){
            document.write(arr[i].innerHTML+"(  javascript   )<br>");
        }
    }
</script>

</code></pre>  2)       (  class="aaa bb") 
   
  <p>    ①        </p> 
   
  <pre><code>


    <meta charset="UTF-8"/>
    <title/>


<p style="border:1px solid red" class="aaa bb c">  p,     aaa bb c</p>
<span style="border:1px solid red" class="bb c">  span,     c</span>
<script>
   function getByClass(iclass){  //    
       var Result=[];//       
       var allElement=document.getElementsByTagName("*"); //      
//             ,          ,        Result   
//           
       var re=new RegExp("\\b"+iclass+"\\b","g");
       for(var i=0;i<allElement.length;i++){
//              search          
           if(allElement[i].className.search(re)!=-1){
               Result.push(allElement[i]);
           }
       }
       return Result;  //        
   }
//             
    window.οnlοad=function(){
        var arr= getByClass("bb");
//                
        for(var i=0;i<arr.length;i++){
            document.write(arr[i].innerHTML+"(  javascript   )<br>");
        }
    }
</script>

</code></pre>   ②    --     
   
   
  <pre><code>


    <meta charset="UTF-8"/>
    <title/>


<p style="border:1px solid red" class="aaa bb c">  p,     aaa bb c</p>
<span style="border:1px solid red" class="bb c">  span,     bb c</span>
<script>
   function getByClass(iclass){  //    
       var Result=[];//       
       var allElement=document.getElementsByTagName("*"); //      
//             ,             ,          ,         ,        Result   
       for(var i=0;i<allElement.length;i++){
           var arr=allElement[i].className.split(/\s+/); //        
           for(var j=0;j<arr.length;j++){
               if(arr[j]==iclass){
                 Result.push(allElement[i]);
               }
           }
       }
       return Result;  //        
   }
//             
    window.οnlοad=function(){
        var arr= getByClass("bb");
//                
        for(var i=0;i<arr.length;i++){
            document.write(arr[i].innerHTML+"(  javascript   )<br>");
        }
    }
</script>

</code></pre> 
  <br/> 3.       html   
   
   
  <pre><code>


    <meta charset="UTF-8"/>
    <title/>


<p style="border:1px solid red">  p1  </p>
<p style="border:1px solid red">  p2  </p>
<script>
    var arr=document.getElementsByTagName("p");
    for(var i=0;i<=arr.length+1;i++){
        document.write(" "+(i+1)+"      :"+arr[i].innerHTML+"<br>");
    }
</script>

</code></pre> 
  <br/> 
  <br/> 
   
 </div> 
</div>
                            </div>
                        </div>

좋은 웹페이지 즐겨찾기