getElementsByClassNameとclassListの互換性の問題と解決策

3198 ワード

###document(element).getElementsByClassName(classNames:classString); HTML 5には、documentとhtml要素で呼び出され、1つ以上のクラス名の文字列を含むパラメータが受け入れられ、作成タイプのNodeList(パフォーマンスの問題がある)が返され、入力された複数のタイプの順序は重要ではありません.この方法は標準ブラウザでのみ有効であり、非標準ブラウザでは無効です.
	
		
		

p1 p

p

var aP = document.getElementsByClassName(' p p1' ); alert(aP.length); /* : 1*/ /* :Error: “getElementsByClassName” */

互換性の解決方法:
 var getElementsByClassName = (function (classList,/*optional*/parent){
        if(typeof classList !== "string") throw TypeError("the type of classList is error");
        var parent = parent || window.document;/*     */
        if(parent.getElementsByClassName){/*             */
            return parent.getElementsByClassName(classList);
        }else{/*               */
            var child = parent.getElementsByTagName("*");
            var nodeList = [];
            /*  classList                             */
            var classAttr = classList.replace(/^\s+|\s+$/g,"").split(/\s+/);
            for(var j = 0,len_j = child.length; j

###classList属性classList属性はHTML 5に追加された属性であり、この属性の下には、Add(value)が与えられた文字列値をリストに追加し、存在する場合は追加しない方法がいくつかあります.Contains(value)は、リストに所定の値があるかどうかを示し、trueがある場合はfalseを返します.Remove(value)リストから指定した文字列を削除します.Toggle(value)リストにすでに指定された値が存在する場合は削除し、指定された値がない場合は増加します.classListをサポートするブラウザにはFirefox 3がある.6+とchromeとIE 10+です.互換性の解決:
 
    var classList = null;
    (function(){
        classList = function (obj){
            this.obj = obj;
        };
        classList.prototype.add = function(value){
            if(typeof value !== "string") throw TypeError("the type of value is error");
            if(this.obj.classList){
                this.obj.classList.add(value);
            }else{
                var arr = value.replace(/^\s+|\s+$/g,"").split(/\s+/);
                this.obj.classList +=" "+arr.join(" ");
            }
        };
        classList.prototype.contains = function(value){
            if(typeof value !== "string") throw TypeError("the type of value is error");
            if(this.obj.classList){
                return this.obj.classList.contains(value);
            }else{
                var arr = value.replace(/^\s+|\s+$/g,"").split(/\s+/);
                var _className = this.obj.className;
                for(var i = 0,len= arr.length; i