码迷,mamicode.com
首页 > 编程语言 > 详细

Javascript获取html元素的几种方法

时间:2017-10-30 11:26:52      阅读:153      评论:0      收藏:0      [点我收藏+]

标签:方式   tool   字符   内容   []   分割   正则表达   参数   bar   

1.通过id获取html元素

<!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)一个类名的情况

 

<!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")

 

    ①正则表达式的方法

<!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>  

 

   ②类名获取--数组方式

<!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元素

 
<!DCTYPE 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>  

 

Javascript获取html元素的几种方法

标签:方式   tool   字符   内容   []   分割   正则表达   参数   bar   

原文地址:http://www.cnblogs.com/zzmb/p/7753268.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!