以下是最新的w3c标准的javascript,目前支持运行在firefox, chrome,IE9以上版本的浏览器
参考资料:https://developer.mozilla.org/ru/docs/Web/API
http://docs.webplatform.org/wiki/dom
选择元素
var els = document.querySelectorAll('.el');
var $ = function (el) {
return document.querySelectorAll(el);
}
var els = $('.el');
创建元素
var newEl = document.createElement('div');
Add event listener
事件绑定
[].forEach.call(document.querySelectorAll('.el'), function (el) {
el.addEventListener('event', function() {
}, false);
});
set/get操作
document.querySelector('.el').setAttribute('key', 'value');
document.querySelector('.el').getAttribute('key');
添加、移除、变换样式类
document.querySelector('.el').classList.add('class');
document.querySelector('.el').classList.remove('class');
document.querySelector('.el').classList.toggle('class');
追加节点
document.querySelector('.el').appendChild(document.createElement('div'));
克隆节点
var clonedEl = document.querySelector('.el').cloneNode(true);
移除节点
remove('.el');
function remove(el) {
var toRemove = document.querySelector(el);
toRemove.parentNode.removeChild(toRemove);
}
父元素
document.querySelector('.el').parentNode;
前后元素
document.querySelector('.el').previousElementSibling;
document.querySelector('.el').nextElementSibling;
get/post的Ajax操作
// get
var xhr = new XMLHttpRequest();
xhr.open('GET', url);
xhr.onreadystatechange = function (data) {
}
xhr.send();
// post
var xhr = new XMLHttpRequest()
xhr.open('POST', url);
xhr.onreadystatechange = function (data) {
}
xhr.send({data: data});