h5新特性

DOM新选择器

querySelector/querySelectorAll
浏览器支持度


getElementsByClassName
浏览器支持度

关于classList属性的相关方法

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     
 7 </head>
 8 <body>
 9     <div class="a1 a2 a3" id="div">div</div>
10     <script type="text/javascript">
11         var oDiv=document.getElementsByClassName("a1")[0];
12         //var oDiv = document.getElementById('div');
13         console.log(oDiv.classList); //得到标签的class类标的对象
14         console.log(oDiv.classList.length);//返回类列表中 类 的数量该属性是只读的
15         console.log(oDiv.classList.item(0));//返回元素中索引值对应的类名。索引值从 0 开始。如果索引值在区间范围外则返回 null
16         //console.log(oDiv.classList.remove("a1","a2"));//移除元素中一个或多个类名。注意： 移除不存在的类名，不会报错。
17         console.log(oDiv.classList.add("a4"));//在元素中添加一个或多个类名。如果指定的类名已存在，则不会添加
18         console.log(oDiv.classList.toggle("a5"));//在元素中切换类名。
19             //第一个参数为要在元素中移除的类名，并返回 false。 
20             //如果该类名不存在则会在元素中添加类名，并返回 true。 
21         console.log(oDiv.classList.contains("mystyle"));//返回布尔值，判断指定的类名是否存在。
22             //true - 元素包已经包含了该类名
23             //false - 元素中不存在该类名
24 
25     </script>
26 </body>
27 </html>

 

posted @ 2018-12-26 11:30  普通平凡是最大的优秀  阅读(141)  评论(0)    收藏  举报