JavaScript获取页面元素的常用方法
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>
