1.选取元素
// Native
var els = document.querySelectorAll('.el');
var els = document.querySelectorAll('.el');
// Shorthand
var $ = function (el) {
return document.querySelectorAll(el);
}
querySelectorAll方法返回的是NodeList对象，需要转换为数组。
2.创建元素
');
// Native
var newEl = document.createElement('div');
3.添加事件
});
// Native
[].forEach.call(document.querySelectorAll('.el'),function (el) {
el.addEventListener('event',function() {
},false);
});
4.get/set属性
// Native
document.querySelector('.el').setAttribute('key','value');
document.querySelector('.el').getAttribute('key');
document.querySelector('.el').setAttribute('key','value');
document.querySelector('.el').getAttribute('key');
5.添加和移除样式Class
DOM元素本身有一个可读写的className属性，可以用来操作class。
HTML 5还提供一个classList对象，功能更强大（IE 9不支持）。
// Native
document.querySelector('.el').classList.add('class');
document.querySelector('.el').classList.remove('class');
document.querySelector('.el').classList.toggle('class');
document.querySelector('.el').classList.add('class');
document.querySelector('.el').classList.remove('class');
document.querySelector('.el').classList.toggle('class');
6.追加元素
尾部追加元素：
'));// Native
document.querySelector('.el').appendChild(document.createElement('div'));
