javascript获取html元素的几种方法

最新推荐文章于 2023-08-22 08:49:15 发布

澡堂麦霸

最新推荐文章于 2023-08-22 08:49:15 发布

阅读量405

点赞数

1.通过id获取html元素

[html]view plaincopy 
   
 <!DOCTYPE html>  
 <html>  
 <head lang="en">  
     <meta charset="UTF-8">  
     <title></title>  
 </head>  
 <body>  
 <div id="mydiv" style="border:1px solid red">我是div，我的id是mydiv</div>  
 <script>  
     var x=document.getElementById("mydiv").innerHTML;  
     document.write(x+"(我是通过javascript获取的)");  
 </script>  
 </body>  
 </html>  

2.通过class来获取html元素

1）一个类名的情况

[html]view plaincopy 
   
 <!DOCTYPE html>  
 <html>  
 <head lang="en">  
     <meta charset="UTF-8">  
     <title></title>  
 </head>  
 <body>  
 <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.onload=function(){  
         var arr= getByClass("aaa");  
 //        循环输出显示元素  
         for(var i=0;i<arr.length;i++){  
             document.write(arr[i].innerHTML+"(我是javascript获得的)<br>");  
         }  
     }  
 </script>  
 </body>  
 </html>  

2）两个类名的情况（例如class="aaa bb"）

①正则表达式的方法

[html]view plaincopy 
   
 <!DOCTYPE html>  
 <html>  
 <head lang="en">  
     <meta charset="UTF-8">  
     <title></title>  
 </head>  
 <body>  
 <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.onload=function(){  
         var arr= getByClass("bb");  
 //        循环输出显示元素  
         for(var i=0;i<arr.length;i++){  
             document.write(arr[i].innerHTML+"(我是javascript获得的)<br>");  
         }  
     }  
 </script>  
 </body>  
 </html>  

②类名获取--数组方式

[html]view plaincopy 
   
 <!DOCTYPE html>  
 <html>  
 <head lang="en">  
     <meta charset="UTF-8">  
     <title></title>  
 </head>  
 <body>  
 <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.onload=function(){  
         var arr= getByClass("bb");  
 //        循环输出显示元素  
         for(var i=0;i<arr.length;i++){  
             document.write(arr[i].innerHTML+"(我是javascript获得的)<br>");  
         }  
     }  
 </script>  
 </body>  
 </html>  

3.通过标签来获得html元素

[html]view plaincopy 
   
 <!DOCTYPE html>  
 <html>  
 <head lang="en">  
     <meta charset="UTF-8">  
     <title></title>  
 </head>  
 <body>  
 <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>  
 </body>  
 </html>  

澡堂麦霸

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript获取html元素的几种方法

1.通过id获取html元素[html] view plain copy> html> head lang="en"> meta charset="UTF-8"> title>title> head> body> div id="mydiv" style="border:1px sol
复制链接

扫一扫