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方法，但願你們能在項目中多多使用，牢記於心！

若是大佬在文中發現了錯誤之處，請指正！