html5新增选择器

         分享点html5的学习笔记，比较基础，突然发现通过写博客来记笔记有很多优点呢，平常记得笔记比较简单，复习起来比较吃力，看自己的博客理解起来还比较轻松，而且只有真正理解了才能表达清楚让别人看懂，还锻炼语言表达能力呢，所以有条件就多写点东西吧

选择器

  1 querySelector(如果是一组元素，只能获取到一组中的第一个元素)

 document.querySelector("#div1");

 document.querySelector(".div1");

 document.querySelector("[title=hello]");

2  querySelectorAll (可以获取一组元素，不过不能直接给所有元素设置样式，得用循环)

document.querySelectorAll(".box");

3 getElementsByClassName（只针对class，相见恨晚的选择器）

document.getElementsByClassName('box')

 

html5提供了class列表属性以及操作class的方法

classList  ：得到的是所在节点的所有class     返回类似数组的对象类型

length :  class的长度

add()  :  添加class方法

remove()  :  删除class方法

toggle() :  切换class方法      toggle("a")  如果列表中存在a 就执行删除操作，不存在就执行添加操作 

 var oDiv =  document.querySelector("#div1");

 oDiv.classList.length // 3

 oDiv.classList.add("div0")//增加class  其他用法大致相同

 

 <div class="div1 div2 div3" id="div1"></div>