元素查找
代码块语法遵循标准markdown代码,例如:
document.getElementById()
document.querySelector()
document.doctype
document.documentElement
document.head
document.title
document.body
document.getElementByClassName()
document.getElementsByName()
document.getElementsByTagName()
document.getElementsByTagNameNs()
document.querySelectorAll()
document.links
document.scripts
document.images
document.embeds
document.forms
class操作
// ie8
// add class
el.className += ' ' + className;
// has class
function hasClass(el,className){
return new RegExp('(^| )' + className + '( |$)', 'gi').test(el.className);
}
// toggle class
function toggleClass(el,className){
var classes = el.className.split(' ');
var existingIndex = -1;
for (var i = classes.length; i--;) {
if (classes[i] === className){
existingIndex = i;
}
}
if (existingIndex >= 0){
classes.splice(existingIndex, 1);
}
else{
classes.push(className);
}
el.className = classes.join(' ');
}
// remove class
function remove(el,className){
el.className = el.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
}
// ie 10
el.classList.add(className); // add class
el.classList.remove(className); // remove class
el.classList.contains(className); // has class
el.classList.toggle(className); // toggle class
节点操作
//创建
var el = document.createElement()
//复制
el.cloneNode(true);
//向节点添加最后一个节点
parent.appendChild(el);
//在指定子节点之前插入新的子节点
parent.insertBefore(el,parent.childNodes[0]);
el.insertAdjacentHTML(where,htmlString);
el.insertAdjacentHTML('beforeBegin',htmlString);
el.insertAdjacentHTML('afterBegin',htmlString);
el.insertAdjacentHTML('beforeEnd',htmlString);
el.insertAdjacentHTML('afterEnd',htmlString);
//父元素
el.parentNode
//删除节点
el.parentNode.removeChild(el);
// 兄弟节点 ie9+
var siblings = Array.prototype.filter.call(el.parentNode.children, function(child){
return child !== el;
})
// 下一个兄弟节点
// ie8
function nextElementSibling(el) {
do { el = el.nextSibling; } while ( el && el.nodeType !== 1 );
return el;
}
nextElementSibling(el);
// ie9+
el.nextElementSibling;
// 上一个兄弟节点
// ie8
function previousElementSibling(el) {
do {
el = el.previousSibling;
}
while ( el && el.nodeType !== 1 );
return el;
}
previousElementSibling(el);
// ie9+
el.previousElementSibling;
// Children
// ie8
var children = [];
for (var i = el.children.length; i--;) {
// Skip comment nodes on IE8
if (el.children[i].nodeType != 8)
children.unshift(el.children[i]);
}
// ie9+
el.children
属性操作
//获取属性值
el.getAttribute('class');
//设置属性值
el.setAttribute('class','classname');
内容操作
//获取元素内容
el.innerHTML
//设置元素内容
el.innerHTML = string
//获取元素内容(包含元素自身)
el.outerHTML
//设置元素内容(包含元素自身)
el.outerHTML = string
//获取文本内容
//IE8
el.innerText
//IE9+
el.textContent
//设置文本内容
//IE8
el.innerText = string
//IE9
el.textContent = string
CSS操作
获取css样式
//IE8
el.currentStyle[attrName]
//IE9+
window.getComputedStyle(el)[attrName]
//伪类
window.getComputedStyle(el,":after")[attrName];
//设置css样式
el.style.csstext = '';
el.style.display = 'none';
位置大小
//元素自身宽度
el.offsetWidth
//元素自身高
el.offsetHeight
// 元素的左外边框至包含元素的左内边框之间的像素距离
el.offsetLeft
el.offsetRight
// 元素的上外边框至包含元素的上内边框之间的像素距离
el.offsetTop
document.documentElement.scrollHeight
scrollHeight
scrollWidth
scrollLeft
scrollTop
// 视口大小
// ie9+
var pageWidth = window.innerWidth,
pageHeight = window.innerHeight;
if (typeof pageWidth != "number"){
// ie8
if (document.compatMode == "CSS1Compat"){
pageWidth = document.documentElement.clientWidth;
pageHeight = document.documentElement.clientHeight;
} else {
// ie6混杂模式
pageWidth = document.body.clientWidth;
pageHeight = document.body.clientHeight;
}
}
事件
// 绑定事件
// ie9+
el.addEventListener(eventName, handler , Booleans); // Booleans默认false(事件在冒泡阶段执行),true(事件在捕获阶段执行)
// ie8
el.attachEvent('on' + eventName, function(){
handler.call(el);
});
// 移除事件
// ie9+
el.removeEventListener(eventName, handler);
// ie8
el.detachEvent('on' + eventName, handler);
// 事件触发
if (document.createEvent) {
// ie9+
var event = document.createEvent('HTMLEvents');
event.initEvent('change', true, false);
el.dispatchEvent(event);
} else {
// ie8
el.fireEvent('onchange');
}
// event对象
var event = window.event||event;
// 事件的目标节点
var target = event.target || event.srcElement;
// 事件代理
ul.addEventListener('click', function(event) {
if (event.target.tagName.toLowerCase() === 'li') {
console.log(event.target.innerHTML)
}
});
DOM加载完毕
function ready(fn) {
if (document.readyState != 'loading'){
// ie9+
document.addEventListener('DOMContentLoaded', fn);
} else {
// ie8
document.attachEvent('onreadystatechange', function() {
if (document.readyState != 'loading'){
fn();
}
});
}
}
绑定上下文
// ie8
fn.apply(context, arguments);
// ie9+
fn.bind(context);
去除空格
// ie8
string.replace(/^\s+|\s+$/g, '');
// ie9+
string.trim();
ajax
// GET
var request = new XMLHttpRequest();
request.open('GET', 'user.php?fname=Bill&lname=Gates', true); // false(同步)
request.send();
// ie8
request.onreadystatechange = function() {
if (this.readyState === 4) {
if (this.status >= 200 && this.status < 400) {
// Success!
var data = JSON.parse(this.responseText);
} else {
// 错误
}
}
};
// ie9+
request.onload = function() {
if (request.status >= 200 && request.status < 400) {
// Success!
var data = JSON.parse(request.responseText);
} else {
// 服务器返回出错
}
};
request.onerror = function() {
// 连接错误
};
// POST
var request = new XMLHttpRequest();
request.open('POST', 'user.php', true); // false(同步)
request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
request.send(dataString);
JSON处理
JSON.parse(string);
JSON.String(Object)
节点遍历
function forEach( nodeList, callback ) {
if(Array.prototype.forEach){
// ie9+
Array.prototype.forEach.call( nodeList, callback );
}else {
// ie8
for (var i = 0; i < nodeList.length; i++){
callback(nodeList[i], i);
}
}
}
forEach(document.querySelectorAll(selector),function(el, i){
})