sao年，该复习原生Javascript了！

前言

当今前端框架层出不穷，基本上都是数据驱动的思想，且移动端项目占了很大市场，那么咱们若是为了操做dom方便就引入相似Jquery这样的库必然会使得咱们的项目体积增大，加载速度慢，因此们要尽量的使用原生js，但可能你们好长时间没有使用过原生又以为很陌生，今天咱们一块儿来复习下经常使用的原生JS的写法。

获取元素

document.querySelector(‘.xxx’);  //class获取  
document.querySelector(‘#xxx’);//id获取  
document.querySelector(‘.xxx.ccc’);//同时包含xxx和ccc  
document.querySelector(‘.xxx,.ccc’);//多选  
document.querySelector(‘.xxx div’);//子类  
document.querySelector(‘.xxx p:first-child’);//第一个P元素  
复制代码

添加class

el.classList.add(‘class_name’);  
复制代码

删除class

el.classList.remove(‘class_name’);  
复制代码

切换class

el.classList.toggle(‘class_name’);  
复制代码

是否包含某个class

el.classList.contains(‘class_name’);  
复制代码

以上class方法存在兼容性问题，由于他们是h5新特性，若是须要兼容咱们可使用以下方法

//是否包含class    
function hasClass(o, n){  
    return new RegExp(‘\\b’+n+’\\b’).test(o.className);  
};  
//添加class    
function addClass(o, n){  
    if(!hasClass(o, n)) o.className+=’ ‘+n;  
};  
//删除class    
function delClass(o, n){  
    if(hasClass(o, n)){  
        o.className = o.className.replace(new RegExp(‘(?:^|\\s)’+n+'(?=\\s|$)’), ”).replace(/^\s*|\s*$/g, ”);  
    };  
};  
复制代码

插入HTML

parent.appendChild(el);  
el.insertBefore(NewDom,ele);  
复制代码

获取子节点

ele.children;  
复制代码

上一个节点

var prev = ele.previousElementSibling || ele.previousSibling   
复制代码

下一个节点

var next = ele.nextElementSibling || ele.nextSibling   
复制代码

父节点

ele.parentNode
复制代码

循环节点

[].forEach.call(ele,function(el,i){  
    //xxx 
});   
复制代码

克隆节点

ele.cloneNode(true)  
复制代码

建立节点

var ele = document.createElement(‘div’);  
复制代码

删除节点

parent.removeChild(ele);  
复制代码

获取、设置、删除属性

ele.setAttribute(name,value);//设置 
ele.getAttribute(name);//获取 
ele.removeAttribute(name);//删除 
复制代码

设置data

ele.dataset.foo = 52  //设置 
ele.dataset.foo  //获取 
  
//也可经过attribute方法来设置获取和删除 
ele.setAttribute(‘data-foo’, 52);//设置 
ele.getAttribute(‘data-foo’); //获取 
ele.removeAttribute(‘data-foo’);//删除 
复制代码

获取内容

var html = ele.innerHTML;  
复制代码

清空元素内容

el.innerHTML = "";  
复制代码

获取文本

var txt = ele.textContent || ele.innerText   
复制代码

设置css

ele.style.height = ‘300px';  
  
ele.style.cssText = ‘height:200px;color:red;left:100px;’  
复制代码

获取css

function getStyle(obj,attr){  
    if(obj.currentStyle){  
        return obj.currentStyle[attr];  
    }else{  
        return getComputedStyle(obj,null)[attr];  
    };  
};  
复制代码

显示隐藏

el.style.display = ”;  
el.style.display = ‘none';
复制代码

元素的内高度（宽度同理）[height + padding]

ele.clientHeight;  
复制代码

元素的外高度（宽度同理）[height + padding + border]

ele.offsetWidth;  
复制代码

元素的外高度（宽度同理）[height + padding + border + margin]

function outerHeight(el){    
    var style = el.currentStyle || getComputedStyle(el);    
    var height = el.offsetHeight + parseInt(style.marginTop) + parseInt(style.marginBottom);    
    return height;    
};  
复制代码

元素的位置

ele.offsetLeft;  
ele.offsetTop;  
ele.getBoundingClientRect().top 
ele.getBoundingClientRect().bottom
ele.getBoundingClientRect().left 
ele.getBoundingClientRect().right
复制代码

Document Ready 事件

document.addEventListener("DOMContentLoaded", function() {  
    // Code 
},false);  
复制代码

Document load 事件

document.addEventListener("load", function() {  
    // Code 
},false);  
复制代码

绑定事件

document.addEventListener(“click”, function() {    
        //xxx 
},false);  
复制代码

获取数据类型

function type(obj){  
    return Object.prototype.toString.call(obj).replace(/^\[object (.+)\]$/, “$1″).toLowerCase();  
};  
复制代码

判断是否为数组

function isArray (v){  
    return Object.prototype.toString.call(v) === ‘[object Array]';     
}; 
复制代码

去除字符串两端的空格

//去除两端空格 
String.prototype.trim = function() {  
    var reExtraSpace = /^\s*(.*?)\s+$/;  
    return this.replace(reExtraSpace, “$1″)  
}  
复制代码

结语

以上就是咱们经常使用的js方法，但愿你们能在项目中多多使用，牢记于心！

若是大佬在文中发现了错误之处，请指正！