JAVASCRIPT提升
DOM扩展
获取元素
~~~javascript
document.getElementsByClassName (‘class’);
//通过类名获取元素，以伪数组形式存在。
document.querySelector(‘selector’);
//通过CSS选择器获取元素，符合匹配条件的第1个元素。
document.querySelectorAll(‘selector’);
//通过CSS选择器获取元素，以伪数组形式存在。
~~~
类名操作
~~~javascript
Node.classList.add(‘class’);
//添加class
Node.classList.remove(‘class’);
//移除class
Node.classList.toggle(‘class’);
//切换class，有则移除，无则添加
Node.classList.contains(‘class’);
//检测是否存在class
jquery和H5操作类的API比较
box = document.querySelecter(‘.box’);
| jquery | H5 |
|---|---|
| $(‘.box’).addClass() | box.classlist.add() |
| $(‘.box’).removeClass() | box.classlist.remove() |
| $(‘.box’).toggleClass() | box.classlist.toggle() |
| $(‘.box’).hasClass() | box.classlist.contains() |