javascript 获取节点元素的封装 

 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>

 

posted @ 2018-04-15 01:30  叶子玉  阅读(435)  评论(0)  编辑  收藏  举报