17

次のコード：

var borderTds = document.getElementsByClassName('leftborder');

Internet Explorer 6、7、および8でエラーメッセージが表示されます。

オブジェクトはこのメソッドをサポートしていません

これらのブラウザでクラスごとに要素を選択するにはどうすればよいですか？

私はJQueryを使いたくない。

4

5 に答える 5

16

IE6、Netscape 6以降、Firefox、およびOpera 7以降では、ページに次のスクリプトをコピーします。

document.getElementsByClassName = function(cl) {
  var retnode = [];
  var elem = this.getElementsByTagName('*');
  for (var i = 0; i < elem.length; i++) {
    if((' ' + elem[i].className + ' ').indexOf(' ' + cl + ' ') > -1) retnode.push(elem[i]);
  }
  return retnode;
};
于 2011-07-05T14:52:39.423 に答える
13

この解決策が役立つ場合があります。getElementsByClassNameこれは、 IEで機能する純粋なJavaScriptで実装されたカスタム関数です。

基本的に、このスクリプトが実行しているのは、考えられるすべてのオプションを1つずつ調べ、利用可能な最良のものを選択することです。これらのオプションは次のとおりです。

  1. ネイティブdocument.getElementsByClassName関数。
  2. document.evaluateXPathクエリの評価を可能にする関数。
  3. DOMツリーをトラバースします。

もちろん、前者はパフォーマンスの面で最高ですが、後者はIE6を含むすべての場所で利用できるはずです。

このページでも利用できる使用例は、次のようになります。

getElementsByClassName("col", "div", document.getElementById("container"));

したがって、この関数では、クラス（必須）、タグ名（オプション、指定されていない場合はすべてのタグを検索）、ルート要素（オプション、指定されていない場合はドキュメント）の3つのパラメーターを使用できます。

アップデート。ブログ投稿にリンクされているソリューションは、2016年1月にシャットダウンされるGoogle Codeでホストされています。ただし、作成者はGitHubで利用できるようにしています。コメントでこれを指摘しているflodinへの称賛。

于 2011-07-05T14:53:20.220 に答える
6

このメソッドはIE6には存在しません。クラスごとに要素を選択し、ライブラリを使用したくない場合は、ページ内のすべての要素をループして、それらのclassNameプロパティでクラスを確認する必要があります。

function getElementsByClassName(className) {
  var found = [];
  var elements = document.getElementsByTagName("*");
  for (var i = 0; i < elements.length; i++) {
    var names = elements[i].className.split(' ');
    for (var j = 0; j < names.length; j++) {
      if (names[j] == className) found.push(elements[i]);
    }
  }
  return found;
}

デモ： http： //jsfiddle.net/kYdex/1/

于 2011-07-05T14:52:17.190 に答える
6

InternetExplorer8以前はをサポートしていませんgetElementsByClassName()。IE8のソリューションのみが必要な場合はquerySelectorAll()、をサポートしています。代わりに、これらのいずれかを使用できます。古いIEの場合は、独自の実装を提供する必要があり、それをサポートする他のいくつかの古いブラウザーの場合は、evaluate()XPath式を実行するものを使用することもできます。

このコードdocument.getElementsByClassNameは、私が説明したメソッドを使用して、まだ存在しない場合のメソッドを提供します。

if (!document.getElementsByClassName) {
  document.getElementsByClassName = function(search) {
    var d = document, elements, pattern, i, results = [];
    if (d.querySelectorAll) { // IE8
      return d.querySelectorAll("." + search);
    }
    if (d.evaluate) { // IE6, IE7
      pattern = ".//*[contains(concat(' ', @class, ' '), ' " + search + " ')]";
      elements = d.evaluate(pattern, d, null, 0, null);
      while ((i = elements.iterateNext())) {
        results.push(i);
      }
    } else {
      elements = d.getElementsByTagName("*");
      pattern = new RegExp("(^|\\s)" + search + "(\\s|$)");
      for (i = 0; i < elements.length; i++) {
        if ( pattern.test(elements[i].className) ) {
          results.push(elements[i]);
        }
      }
    }
    return results;
  }
}

それについて何かが気に入らない場合は、お気に入りの検索エンジンを使用して別の検索エンジンを見つけることができます。

于 2014-07-31T08:43:55.510 に答える
-2

getElementsByClassnameがサポートしていない場合、一部の古いブラウザではエラーが発生します。var modal = document.getElementById（'myModal'）;を試してください。modal.onclick = function（）{次に、getElementById modal.style.display = "none";を使用して、onclick関数または別の関数を実行します。}

于 2017-02-17T07:01:36.243 に答える