Internet Explorer でクラス名によって要素を取得するにはどうすればよいですか?

getElementsByClassName() IE との互換性

質問: 特定のクラスを持つ要素の配列を効果的に取得する方法、IE の互換性制限を考慮していますか?

答え:

Document.getElementsByClassName() は、IE ではサポートされていない最新のメソッドです。代わりに、次のアプローチを検討してください:

カスタム関数 (IE6 ):

getElementsByClassName() をエミュレートするカスタム関数を定義します。これには、DOM を走査し、指定されたクラス名に対して要素のクラス名をテストすることが含まれます:

<code class="js">function getElementsByClassName(node, className) {
    var a = [];
    var re = new RegExp('(^| )' + className + '( |$)');
    var els = node.getElementsByTagName('*');
    for (var i = 0, j = els.length; i < j; i++)
        if (re.test(els[i].className)) a.push(els[i]);
    return a;
}

// Usage:
var tabs = getElementsByClassName(document.body, 'tab');</code>

querySelectorAll (IE8 ):

IE8 以降のサポートで十分な場合、querySelectorAll():

<code class="js">if (!document.getElementsByClassName) {
    document.getElementsByClassName = function (className) {
        return this.querySelectorAll('.' + className);
    };
    Element.prototype.getElementsByClassName = document.getElementsByClassName;
}

// Usage:
var tabs = document.getElementsByClassName('tab');</code>

をサポートするようにドキュメントと Element オブジェクトを拡張します。これはドキュメント メソッドではないため、最初の引数として目的のノードを指定して getElementsByClassName() を呼び出すようにしてください。これらのソリューションのいずれかを実装すると、クラス名で要素を取得できるため、IE を含む幅広いブラウザーとの互換性が確保されます。

以上がInternet Explorer でクラス名によって要素を取得するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。