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>
①正则表达式的方法
- <!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>