Javascript获取html元素的几种方法
Posted 澡堂麦霸
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Javascript获取html元素的几种方法相关的知识，希望对你有一定的参考价值。
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元素
以上是关于Javascript获取html元素的几种方法的主要内容，如果未能解决你的问题，请参考以下文章