元素查找
// Node document.getElementById(id) // document.getElementById('test') document.querySelector(selectors) // document.querySelector('#test div') document.doctype document.documentElement document.head document.title document.body // NodeList document.getElementsByClassName(names) // document.getElementsByClassName('test') document.getElementsByName(name) // document.getElementsByName('demo') document.getElementsByTagName(name) // document.getElementsByTagName('div') document.getElementsByTagNameNS(namespace, name) // document.getElementsByTagNameNS('http://www.w3.org/1999/xhtml', 'div') document.querySelectorAll(selectors) // document.querySelectorAll('#test div') document.links document.scripts document.images document.embeds document.forms
class操作
1 // ie8 2 3 // add class 4 5 el.className += ' ' + className; 6 7 8 9 // has class 10 11 function hasClass(el,className){ 12 13 return new RegExp('(^| )' + className + '( |$)', 'gi').test(el.className); 14 15 } 16 17 18 19 // toggle class 20 21 function toggleClass(el,className){ 22 23 var classes = el.className.split(' '); 24 25 var existingIndex = -1; 26 27 for (var i = classes.length; i--;) { 28 29 if (classes[i] === className){ 30 31 existingIndex = i; 32 33 } 34 35 } 36 37 if (existingIndex >= 0){ 38 39 classes.splice(existingIndex, 1); 40 41 } 42 43 else{ 44 45 classes.push(className); 46 47 } 48 49 el.className = classes.join(' '); 50 51 } 52 53 54 55 // remove class 56 57 function remove(el,className){ 58 59 el.className = el.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' '); 60 61 } 62 64 65 // ie 10 66 67 el.classList.add(className); // add class 68 69 el.classList.remove(className); // remove class 70 71 el.classList.contains(className); // has class 72 73 el.classList.toggle(className); // toggle class
节点操作
// 创建
var el = document.createElement(name);
// 复制
el.cloneNode(true); // 默认为false(克隆节点及其后代), true(克隆节点及其属性，以及后代)
// 向节点添加最后一个子节点
parent.appendChild(el);
// 在指定子节点之前插入新的子节点
parent.insertBefore(el, parent.childNodes[0]); // insertAdjacentHTML方法 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('alt');
// 设置属性值
el.setAttribute('alt', '图片描述');
内容操作
// 获取元素内容 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.display = 'none';
