web-dev-qa-db-ja.com

getElementsByClassName（）は、IE6、IE7、IE8などの古いInternetExplorerでは機能しません

次のコード：

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

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

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

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

私はJQueryを使いたくない。

javascriptinternet-explorer-8internet-explorer-7internet-explorer-6dom-traversal
15
code511788465541441

この 解決策 が役立つかもしれません。これは、IEで機能する純粋なJavaScriptで実装されたカスタムgetElementsByClassName関数です。

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

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

もちろん、前者はパフォーマンスの面で最高ですが、後者はIE 6を含むどこでも利用できるはずです。

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

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

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

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

12
Andrei

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

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

このコード 私が説明したメソッドを使用してまだ存在しない場合は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;
  }
}

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

5
kapa

このメソッドは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/

5
Guffa