Javascript獲取html元素的幾種方法
阿新 • • 發佈：2017-10-30
nbsp code tel html元素 參數 ctype regex head 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元素
<!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元素的幾種方法