sao years, the native Javascript a review!

Foreword

Today the front frame after another, basically data-driven thinking and moving end projects accounted for a large market, so if we operate in order to facilitate the introduction of similar dom Jquery such a library will certainly make our project volume increases, the loading speed slow, so they want to use as native js, but probably not been used for a long time Hello everyone native and felt very strange, and today we are together under review common native JS wording.

Gets the element

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元素  
复制代码

Add class

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

Delete class

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

Switching class

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

It contains a class

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

Compatibility issues above class method, because they are h5 new features need to be compatible if we can use the following method

//是否包含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, ”);  
    };  
};  
复制代码

Insert HTML

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

Getting child nodes

ele.children;  
复制代码

A node

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

The next node

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

Parent

ele.parentNode
复制代码

Circulation node

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

Cloning node

ele.cloneNode(true)  
复制代码

Creating nodes

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

Delete Node

parent.removeChild(ele);  
复制代码

Get, set, delete property

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

Setting data

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

Access to content

var html = ele.innerHTML;  
复制代码

Empty element content

el.innerHTML = "";  
复制代码

Get the text

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

Set css

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

Get css

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

Show hidden

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

The height of the element (width Similarly) [height + padding]

ele.clientHeight;  
复制代码

The height of the outer element (width Similarly) [height + padding + border]

ele.offsetWidth;  
复制代码

The height of the outer element (width Similarly) [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;    
};  
复制代码

Position of the element

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

Document Ready Event

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

Document load event

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

Binding events

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

Gets the data type

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

Determine whether an array

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

Removing the ends of the string of blanks

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

Epilogue

These are the methods we used js, I hope you will use in your project, keep in mind!

If an error is found Gangster place in the text, please correct me!

Reproduced in: https: //juejin.im/post/5d036a63e51d45775a700305