2

以前の document.getElementByClassName のクロス ブラウザ修正で助けを求める質問を調べたところ、一見完璧な修正を提供するこのリンクが見つかりました。

ただし、私が構築したサイトに実装しようとしましたが、IE8 (互換性を確保するために取り組んでいるブラウザー) で修正を機能させることができません (または他のブラウザー)。「オブジェクトまたはプロパティはサポートされていません」というエラーがまだ表示されます。これは、修正が明らかに機能していないことを意味します。

これが正しく機能しない可能性があり、問題を抱えている人を見つけることができない理由について簡単に説明します。この修正を機能させるために私を助けていただけないでしょうか。

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

4

6 に答える 6

2

これは機能します（テスト済み）：

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;  
}

それを持っていないブラウザにはそれを追加する必要がありますが、それを持っているブラウザはそれをプロトタイプチェーンのさらに下に提供するため（テストされていません）、シャドウイングする必要があります。

于 2012-01-10T10:44:24.500 に答える
1

IE 8+ およびほとんどの新しいブラウザー。

とを使用document.querySelectorしdocument.querySelectorAllます。これらのメソッドを使用すると、css のようにセレクターによって任意の要素にアクセスできます:)

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

それらの違いは、最初に一致した要素から最初の要素を取得し、2番目の方法で一致した要素のコレクションを取得することです。

デモ: 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 の関数が存在する場合に使用できます

 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");
于 2012-01-10T09:47:32.297 に答える
0

すべての主要なブラウザでサポートされている代わりに getElementsByTagName() を使用するようにコードを変更してみてはどうでしょうか。

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

for (var i = 0; i < elements.length; i++) {
    if (elements[i].className == t) {
        elements[i].className += ' animate';
    }
}
于 2012-01-10T09:58:55.023 に答える
0

オブジェクトgetElementsByClassNameのメソッドではなく、というグローバル関数を作成しました。ではなくordocumentを呼び出す必要があります。getElementsByClassNamewindow.getElementsByClassNamedocument.getElementsByClassName

于 2012-01-10T09:34:33.533 に答える
-3

ルールは「シンプルに」

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;  
    }
}
于 2013-10-04T15:54:56.120 に答える
-4

$(".className") のようなクラス名を持つ要素を簡単に選択できるようになるため、JQueryの使用を開始する必要があると思います

于 2012-01-10T09:28:19.200 に答える