javascript获取html元素的几种方法

来源：互联网发布：四糸乃cos装淘宝编辑：程序博客网时间：2024/06/14 11:18

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

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