1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6 </head>
7 <body>
8 <ul id="list">
9 <li class="book">西游记</li>
10 <li class="book">水浒传</li>
11 <li class="book">红楼梦</li>
12 <li class="book">三国演义</li>
13 </ul>
14 <input type="button" name="btn" value="按钮" id="inputButton"/>
15 <div class="box" id="divID"></div>
16 </body>
17 <script type="text/javascript">
18 // 1、根据 id 获取元素
19 var elementUl = document.getElementById("list");
20 console.log(elementUl);
21 // 例子
22 var elementDiv = document.getElementById("divID");
23 console.log(elementDiv);
24 // 2、根据 class 名字去获取
25 // 获取书
26 var books = document.getElementsByClassName("book");
27 console.log(books);
28
29 var divs = document.getElementsByClassName("box");
30 divs[0] console.log(divs);
31
32 // 3、根据标签名获取元素
33 var elementDiv = document.getElementsByTagName("div");
34 console.log(elementDiv[0]);
35 var elementLis = document.getElementsByTagName("li");
36 console.log(elementLis[2]);
37
38
39
40 // 4、用在某些特殊情况下（根据name 去获取元素）
41 var inputElement = document.getElementsByName("btn");
42 console.log(inputElement[0]);
43
44
45
46 // 5、通过 css 选择器去获取元素(获取到一个元素)
47 // 获取到class名为book的元素，从文档最开始寻找，找到第一个就结束查找 （IE9以下不支持）
48 var books = document.querySelector(".book");
49 console.log(books);
50 // 获取到class名为book的元素 所有的.(IE9以下不支持)
51 var books = document.querySelectorAll(".book");// .book === class="book"
52 console.log(books);
53
54
55
56 // 问题1 取出 ul标签前面的样式
57 // 第一步：拿到 ul 标签
58 var elementUl = document.getElementById("list");
59 // 修改元素
60 elementUl.style.listStyle = "none";
61 elementUl.style.color = "red";
62
63
64
65
66
67 // 修改 div 元素
68 var elementDiv = document.getElementsByClassName("box");
69 elementDiv[0].style.width = "100px";
70 elementDiv[0].style.height = "100px";
71 elementDiv[0].style.background = "red";
72
73
74
75
76 // 修改button 按钮的显示
77 var elementInput = document.getElementsByTagName("input");
78 elementInput[0].value = "博客园里大家一起来交流啊";
79
80
81
82
83 </script>
84
85 </html>