document.getElementByClassName - クロスブラウザ修正

Question

私は前のdocument.getElementByClassNameのクロスブラウザ修正でヘルプを尋ねましたが、一見完全な修正を提供したthis linkが見つかりました。

しかし、私は構築したサイトで実装しようとしましたが、互換性を得るために働いているIE8上で動作するように修正できません。 "オブジェクトまたはプロパティがサポートされていません"というエラーが表示されていますが、この修正は明らかに機能していません。

これが正しく動作しない可能性があり、問題のある人を見つけることができないような理由がありましたら、私はこの修正プログラムの動作を手伝ってもらえるかどうか尋ねます。私はそれはそれは$（」のようになり、それのクラス名を持つ要素を選択することが簡単になりますよう、あなたがjQueryの使用を開始すべきだと思う

私が取り組んで修正しようとしていますサイトはhttp://lifeswitch.org.nz.s125738.gridserver.com/

Answer 1

オブジェクトのメソッドではなく、getElementsByClassNameというグローバル関数を作成しました。 getElementsByClassNameまたはwindow.getElementsByClassNameに電話する必要があります（document.getElementsByClassNameではなく）。

Answer 2

です。クラス名"）

Answer 3

IE 8以降およびほとんどの新しいブラウザでは、

document.querySelectorおよびdocument.querySelectorAllを使用してください。 これらの方法は、CSSのようにセレクタにより任意の要素にアクセスすることができ可能:)それらの間

var e = document.querySelectorAll(".myClass"); // 

差が最初に一致した要素のコレクションを取得マッチ要素、第二の方法の最初の要素を取得することです。

デモ：http://jsfiddle.net/f9cHr/要素の色を変更するには、文書をクリックしてください。

そして今：

getElementsByClassName = function(className , ctx ) { 
    var context = ctx ? (typeof ctx =="string" ? document.querySelector(ctx) : ctx): document; 
    return context.querySelectorAll && context.querySelectorAll("." + className) 
}; 

querySelector`s機能が

if(document.querySelector && document.querySelectorAll) { 
    //getElementsByClassName = function from above here 
} else { 
    //getElementsByClassName = function you are using here 
} 

利用存在しているときは、この機能を使用することができます。また、

var myClassInnerMyId = 
      getElementsByClassName("myClass" , document.getElementById("myId")); 
     // = document.querySelectorAll("#myId .myClass"); 

someClassesInnerOtherId = getElementsByClassName("myClass1,myClass2" , "#otherId"); 

    // = document.querySelectorAll("#otherId myClass1, #otherId myClass2"); 

Answer 4

ではなく、これが機能するすべての主要なbrowsers

elements = document.getElementById(id).getElementsByTagName('a'); 

for (var i = 0; i < elements.length; i++) { 
    if (elements[i].className == t) { 
     elements[i].className += ' animate'; 
    } 
} 

Answer 5

によってサポートされているgetElementsByTagNameの（）を使用するようにコードを修正について（テスト）方法：

function getElementsByClassName(cn, rootNode) { 
    if (!rootNode) { 
    rootNode = document; 
    } 
    for (var r=[], e=rootNode.getElementsByTagName('*'), i=e.length; i--;) { 
    if ((' '+e[i].className+' ').indexOf(' '+cn+' ')>-1) { 
     r.push(e[i]); 
    } 
    } 
    return r; 
} 

あなたはおそらくそれを追加することで逃げることができこのようなNode.prototype、：

それを持っていないブラウザに追加し、それはよすべき

Node.prototype.getElementsByClassName = function(cn) { 
    for (var r=[], e=this.getElementsByTagName('*'), i=e.length; i--;) { 
    if ((' '+e[i].className+' ').indexOf(' '+cn+' ')>-1) { 
     r.push(e[i]); 
    } 
    } 
    return r; 
} 

プロトタイプチェーン（テストされていない）をさらに遠くに提供しているので、それを持っているブラウザーには影を付ける必要があります。

Answer 6

ルールは、方法は、関数がなされていない存在する場合

if(!typeof document.getElementsByClassName == 'function'){ 
    Object.prototype.getElementsByClassName = function(cn) { 
     if (!this) return null; 
     for (var r=[], e=this.getElementsByTagName('*'), i=e.length; i--;) 
     if (e[i].className.indexOf(cn)>-1) r.push(e[i]); 
     return r; 
    } 
} 

「をシンプルにしてください」です。

また、例をユーザーフレンドリーで読みやすいようにしてください。

補遺、ループを使用して別の方法...

if(!typeof document.getElementsByClassName == 'function'){ 
    Object.prototype.getElementsByClassName = function(cn) { 
     if (!this) return null; 
     var r=[],e=this.getElementsByTagName('*'); 
     for (i in e) 
     if (e[i].className.indexOf(cn)>-1) r.push(e[i]); 
     return r; 
    } 
}