1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title></title> 5 <style type="text/css"> 6 .active { 7 color: red; 8 } 9 /* 10 類名操作 11 */ 12 nav a { 13 background-color: yellow; 14 } 15 16 .active1 { 17 background-color: red; 18 } 19 20 </style> 21 <script type="text/javascript"> 22 /* 23 DOM擴展 24 */ 25 window.onload = function () { 26 27 // ---------------------- 一. 獲取元素的方式 ------------------------------------- 28 // ----------------------- 非HTML5獲取元素方式 --------------------------------- 29 // 1. getElementById(id) 通過id獲取元素 30 var activeObj = document.getElementById("ul01"); 31 // alert(activeObj); 32 33 // 2. getElementsByTagName(tagName) 通過標記名獲取元素, 返回數組 34 var arr = document.getElementsByTagName("li"); 35 // alert(arr[0]); 36 arr[0].style.backgroundColor = "red"; 37 arr[3].style.backgroundColor = "blue"; 38 39 // ----------------------- HTML5獲取元素方式 --------------------------------- 40 // 3. getElementsByClassName(className) 通過類名獲取元素, 返回數組 41 var arr = document.getElementsByClassName("active"); 42 arr[0].style.backgroundColor = "yellow"; 43 arr[1].style.backgroundColor = "green"; 44 45 // 4. querySelector(selector) 通過CSS選擇器獲取元素 46 47 // 類選擇器 符合條件的第一個元素 48 var li = document.querySelector(".active"); 49 li.style.backgroundColor = "red"; 50 51 // id選擇器 52 var li = document.querySelector("#active"); 53 li.style.backgroundColor = "red"; 54 55 // 后代選擇器 56 var a = document.querySelector(".active a"); 57 a.style.color = "yellow"; 58 59 // 5. querySelectorAll(selector) 通過CSS選擇器獲取元素 返回數組 60 var arr = document.querySelectorAll("li li"); 61 arr[0].style.color = "yellow"; 62 arr[1].style.color = "yellow"; 63 64 // ------------------------------ 二. 類名操作 ---------------------------------- 65 // 獲取a元素數組 66 var arr = document.querySelectorAll("nav a"); 67 var len = arr.length; 68 for (var i = 0; i < len; i++) { 69 70 // 給每個a添加事件 71 arr[i].onclick = function () { 72 73 // 移除類 74 // document.querySelector(".active1").classList.remove("active1") 75 76 // 添加類 77 // this.classList.add("active"); 78 79 // 有則移除類, 無則添加類 80 this.classList.toggle("active1"); 81 82 // 檢測是否有類名 83 alert(this.classList.contains("active1")); 84 } 85 } 86 87 // -------------------------- 三. 自定義屬性 ------------------------- 88 /* 89 格式: data-name 90 data- 前綴表明這是一個自定義屬性 91 name 自定義屬性的名字 92 */ 93 // 獲取a 94 var a = document.querySelector("nav a"); 95 96 // 獲取a的自定義屬性 97 // alert(a.getAttribute("data-name")); 98 // alert(a.getAttribute("data-age")); 99 100 // 添加a的自定義屬性 101 // a.setAttribute("data-sex", "男") 102 103 // dataset管理自定義屬性 104 var customData = a.dataset; 105 106 // 設置自定義屬性 107 customData.name = "lisi"; 108 customData.age = 22; 109 110 // 添加自定義屬性(當設置的自定義屬性不存在時即為添加自定義屬性) 111 customData.sex = "男"; 112 113 // 獲取自定義屬性 114 alert(customData.name); 115 alert(customData.age); 116 alert(customData.sex); 117 } 118 119 </script> 120 </head> 121 <body> 122 123 <!-- 獲取元素的方式 --> 124 <ul id="ul01"> 125 <li>國內新聞</li> 126 <li class="active"><a>國際新聞</a> </li> 127 <li class="active">體育新聞 128 <ul> 129 <li>籃球新聞</li> 130 <li>足球新聞</li> 131 </ul> 132 </li> 133 <li id="active">娛樂新聞</li> 134 </ul> 135 136 <!-- 類名操作 --> 137 <nav> 138 <!-- data-name, data-age為自定義屬性 --> 139 <a href="#" class="active1" data-name="data-name", data-age="data-age">國內新聞</a> 140 <a href="#">國際新聞</a> 141 <a href="#">體育新聞</a> 142 <a href="#">娛樂新聞</a> 143 </nav> 144 145 </body> 146 </html>