JSにおけるgetElementsByClassNameとclassListの互換性に関する問題解決策の分析

この例では、JSにおけるgetElementsByClassNameとclassListの互換性に関する問題解決策について説明します.皆さんの参考にしてください.具体的には以下の通りです.
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 
 

JavaScriptに関する詳細は、「JavaScript操作DOMテクニックまとめ」、「JavaScriptページ要素操作テクニックまとめ」、「JavaScriptイベント関連操作とテクニック大全」、「JavaScript検索アルゴリズムテクニックまとめ」、「JavaScriptデータ構造とアルゴリズムテクニックまとめ」、『JavaScript遍歴アルゴリズムとテクニック総括』及び『JavaScriptエラーとデバッグテクニック総括』
JavaScriptプログラムの設計に役立つことを願っています.