JavaScript获取页面元素的常用方法
程序员文章站
2023-10-19 08:46:29
1、通过标签获取元素，返回一个数组 var li = document.getElementsByTagName('li');//标签获取元素 li[0].innerHTML;// 查看获取元素的内容 li[0].innerHTML = "content";//修改获取到标签中的内容 2、通过id获 ......
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>
上一篇： 你喜欢小青菜吗