サンパウロ年、ネイティブの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元素  
复制代码

クラスを追加します。

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

クラスを削除します

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

スイッチングクラス

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

これは、クラスが含まれています

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

彼らは新しい機能を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);//删除  
复制代码

データを設定します

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';
复制代码

要素の高さ（同様に幅）高さ+パディング]

ele.clientHeight;  
复制代码

外側要素の高さ（同様に幅）高さ+パディング+ボーダー]

ele.offsetWidth;  
复制代码

外側要素の高さ（同様に幅）高さ+パディング+ボーダー+マージン]

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

文書readyイベント

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

ドキュメントのロードイベント

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を使用する方法です！

エラーがテキストでギャング場所を発見された場合、私を修正してください！

ます。https：//juejin.im/post/5d036a63e51d45775a700305で再現