IE 8と以下のDOM要素を互換化する方法--低バージョンブラウザでもclassでDOMを取ることができます

現在、IE 9とそれ以上のブラウザの大部分は2つの爽やかなdomセレクタをサポートしています:querySelectorとquerySelectorAllですが、いつも頑固で機能しないプロジェクトが低バージョンのIEに頼っています.この時、あなたはまたそれを互換化しなければなりません.最大の問題は、クラス名classに基づいて複数のDOMオブジェクトを取得する必要がある場合が多いことですが、どうすればいいのでしょうか.ここでは解決策を示します.

一、解決方案

唯一の方法は、ブラウザにまたがるDOM要素取得方法を自分でカプセル化することであり、querySelectorとquerySelectorAllで実現された機能に基づいて、低バージョンブラウザのオリジナルのDOM方法を逆利用して関数をカプセル化することである.
では、この関数は少なくともこれらの機能を実現しなければなりません.

機能1:単一DOM要素(querySelectorAllの最初のもの)を返すことができます.

id属性に基づいて

を取得する.

classクラス名に基づいて

を取得

機能2:同じクラス名を複数含むDOM要素のセットを返すことができる(クラスquerySelectorAll機能)

はclassクラス名しかパラメータとして使用できません.結局idは唯一の

です.

二、実現原理

入力したパラメータがidなのかclassなのかを判断し、単一の要素を返すには、正則でマッチングするのに適しており、id自体が先頭に「#」という特徴で区別する必要がある.(したがって、この関数がidをマッチング条件として使用する場合、#番号を付ける必要があります)具体的なコードは以下の通りです.

var domUtil = {
    //  DOM 
    get: function(query) {
        var _this = this;
        if(!document.querySelector) {
            return document.querySelector(query);
        } else {
            var elements = document;
            var queryStrArray = query.split(/ +/);
            console.log(queryStrArray)
            for(var i = 0; i < queryStrArray.length; i++) {
                var domName = queryStrArray[i];
                elements = _this.getElementsOfParentNode(domName, elements);
            }
            if(elements.length == 1) {
                return elements[0];
            } else {
                return elements;
            }
        }
    },
    //  DOM 
    getAll: function (query) {
        if(!document.querySelectorAll) {
            return document.querySelectorAll(query);
        }else{
            var className = query.slice(1)
            var children = document.getElementsByTagName('*');                   // html DOM  
      var elements = [];                                                                // class 
      for (var i = 0; i < children.length; i++) {
          var child = children[i];                                                        
          var classNames = child.className.split(' ');                                    // class 
          for (var j = 0; j < classNames.length; j++) {                                 // ， class elements 
              if (classNames[j] == className) {
                  elements.push(child);
                  break;
              }
          }
      }
      return elements;
        }
    },
    //  DOM 
    getElementsOfParentNode: function(domName, parentNode) {
        var _this = this;
        parentNode = parentNode || document;
        domName = domName.trim();
        var regExps = {
            id: /^#/,
            class: /^/
        };
        if(regExps.id.test(domName)) {
            domName = domName.replace(/^\#/g, "");
            return parentNode.getElementById(domName);
        } else if(regExps.class.test(domName)) {
            domName = domName.replace(/^./g, "");
            return _this.getElementsByClassName(domName, parentNode);
        } else {
            return parentNode.getElementsByTagName(domName);
        }
    },
    //  class 
    getElementsByClassName: function(className, parentNode) {
        if(parentNode.getElementsByClassName){
            return parentNode.getElementsByClassName(className);
        } else {
            className = className.replace(/^ +| +$/g,"");
            var classArray = className.split(/ +/);
            var eles = parentNode.getElementsByTagName("*");
            for(var i = 0;i < classArray.length; i++){
                var classEles = [];
                var reg = new RegExp("(^| )" + classArray[i] + "( |$)");
                for(var j = 0;j < eles.length; j++){
                    var ele = eles[j];
                    if(reg.test(ele.className)){
                        classEles.push(ele);
                    }
                }
                eles = classEles;
            }
            return eles;
        }
    }
};

三、使用方法

idまたはclassに従って単一のDOM要素を取得する必要がある場合、domUtil.get(query)メソッドが呼び出され、qeuryパラメータはid属性("#item")またはclassクラス名(".shop")を受信する.

classクラス名を使用してDOM要素のセットを取得する必要がある場合、domUtil.getAll(query)メソッドが呼び出され、パラメータとしてclassクラス名が入力される.