<JavaScript><DOM> 十七. HTML5 DOM扩展(获取元素方式, 类名操作, 自定义属性)-CSDN博客

  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>