1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Document</title>
6 <style>
7 div {
8 width: 100px;
9 height: 100px;
10 background-color: tomato;
11 margin: 10px;
12 }
13 </style>
14 </head>
15 <body>
16 <div></div>
17 <div class="box"></div>
18 <div id="box"></div>
19 <div class="box"></div>
20 <div></div>
21
22 <script>
23 //简单版
24 // getEle("#box").style.backgroundColor = "lemonchiffon";
25
26 // var claArr = getEle(".box");
27 // for (var i = 0; i < claArr.length; i++) {
28 // claArr[i].style.backgroundColor = "yellow";
29 // }
30 // var divArr = getEle("div");
31 // for (var i = 0; i < divArr.length; i++) {
32 // divArr[i].style.border = "2px solid #ddd";
33 // }
34
35 // //封装一个方法，然后判断第一个字符，如果是#用id，如果是.用className,否则用tagName
36 // function getEle(str){
37 // var str1 = str.charAt(0);
38 // if (str1 ==="#") {
39 // return document.getElementById(str.slice(1));
40 // }else if (str1 ===".") {
41 // return document.getElementsByClassName(str.slice(1));
42 // }else{
43 // return document.getElementsByTagName(str);
44 // }
45 // }
46
47 //最终版
48 $("#box").style.backgroundColor = "lemonchiffon";
49 var claArr = $(".box");
50 for (var i = 0; i < claArr.length; i++) {
51 claArr[i].style.backgroundColor = "gold";
52 }
53 var divArr = $("div");
54 for (var i = 0; i < divArr.length; i++) {
55 divArr[i].style.border = "2px solid #ccc";
56 }
57 function $(str){
58 var str1 = str.charAt(0);
59 if (str1 ==="#") {
60 return document.getElementById(str.slice(1));
61 }else if (str1 ===".") {
62 return document.getElementsByClassName(str.slice(1));
63 }else{
64 return document.getElementsByTagName(str);
65 }
66 }
67 </script>
68 </body>
69 </html>