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>