1、通過標簽獲取元素，返回一個數組
var li = document.getElementsByTagName('li');//標簽獲取元素
li[0].innerHTML;// 查看獲取元素的內容
li[0].innerHTML = "content";//修改獲取到標簽中的內容
2、通過id獲取頁面元素
var header = document.getElementById("header");//id獲取元素
3、通過class名字獲取頁面元素
var list = document.getElementsByClassName('list');//返回一個數組，通過下標訪問文本
4、通過CSS選擇符方式獲取頁面元素
//querySelector：返回符合條件的第一個
var str = document.querySelector('li');
var str1 = document.querySelectorAll('li');//全部返回，每個li都是一個對象
1 <!DOCTYPE html> 2 <html lang="zh-cn"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>JavaScript獲取頁面的常用方法</title> 6 <script> 7 // 1、通過標簽獲取元素，返回一個數組 8 var li = document.getElementsByTagName('li'); 9 10 //2、通過id獲取頁面元素 11 var header = document.getElementById("header"); 12 13 // 3、通過class名字獲取頁面元素 14 var list = document.getElementsByClassName('list');//返回一個數組，通過下標訪問文本 15 16 // 4、通過CSS選擇符方式獲取頁面元素 17 //querySelector：返回符合條件的第一個 18 var str = document.querySelector('li'); 19 // querySelectorAll：返回符合條件的每一個 20 var str1 = document.querySelectorAll('li'); 21 </script> 22 </head> 23 <body> 24 <p id="header">JavaScript學習</p> 25 <ul class="list"> 26 <li>HTML</li> 27 <li>jQuery</li> 28 <li>JavaScript</li> 29 </ul> 30 <ul class="list"> 31 <li>HTML</li> 32 <li>jQuery</li> 33 <li>JavaScript</li> 34 </ul> 35 </body> 36 </html>