目录

  1. 元素查找
  2. class操作
  3. 节点操作
  4. 属性操作
  5. 内容操作
  6. css操作
  7. 位置大小
  8. 事件
  9. DOM加载完毕
  10. 绑定上下文
  11. 去除空格
  12. Ajax
  13. JSON处理
  14. 节点遍历

元素查找

// 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';

 

位置大小

// getBoundingClientRect返回一个对象,包含top,left,right,bottom,width,height

// width、height 元素自身宽高

// top 元素上外边界距窗口最上面的距离

// right 元素右外边界距窗口最上面的距离

// bottom 元素下外边界距窗口最上面的距离

// left 元素左外边界距窗口最上面的距离

// width 元素自身宽(包含border,padding)

// height 元素自身高(包含border,padding)

 

// 元素在页面上的偏移量

var rect = el.getBoundingClientRect()

return {

 top: rect.top + document.body.scrollTop,

 left: rect.left + document.body.scrollLeft

}

 

// 元素自身宽(包含border,padding)

el.offsetWidth

// 元素自身高(包含border,padding)

el.offsetHeight

// 元素的左外边框至包含元素的左内边框之间的像素距离

el.offsetLeft

// 元素的上外边框至包含元素的上内边框之间的像素距离

el.offsetTop

 

//通常认为 <html> 元素是在 Web 浏览器的视口中滚动的元素(IE6 之前版本运行在混杂模式下时是 <body> 元素)

//因此,带有垂直滚动条的页面总高度就是 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){

 

})