76

特定のクラスを持つ要素の配列を取得するための最良の方法は何ですか?

document.getElementsByClassName を使用しますが、IE はサポートしていません。

だから私はジョナサン・スヌークの解決策を試しました：

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;
}
var tabs = document.getElementsByClassName(document.body,'tab');

...しかし、IEはまだ言います:

オブジェクトはこのプロパティまたはメソッドをサポートしていません

アイデア、より良い方法、バグ修正はありますか?

jQueryやその他の「かさばるjavascript」を含むソリューションは使用しないことをお勧めします。

アップデート：

私はそれを働かせました！

@joeが述べたように、関数はのメソッドではありませんdocument。

したがって、作業コードは次のようになります。

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;
}
var tabs = getElementsByClassName(document.body,'tab');


...また、IE8+ のサポートのみが必要な場合は、次のように動作します。

if(!document.getElementsByClassName) {
    document.getElementsByClassName = function(className) {
        return this.querySelectorAll("." + className);
    };
    Element.prototype.getElementsByClassName = document.getElementsByClassName;
}

通常どおりに使用します。

var tabs = document.getElementsByClassName('tab');
4

7 に答える 7

56

これは文書化の方法ではありません:

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

tabs = getElementsByClassName(document.body,'tab');  // no document
于 2011-09-14T03:32:57.013 に答える
18

古いブラウザ用の関数を作成できます

if (typeof document.getElementsByClassName!='function') {
    document.getElementsByClassName = function() {
        var elms = document.getElementsByTagName('*');
        var ei = new Array();
        for (i=0;i<elms.length;i++) {
            if (elms[i].getAttribute('class')) {
                ecl = elms[i].getAttribute('class').split(' ');
                for (j=0;j<ecl.length;j++) {
                    if (ecl[j].toLowerCase() == arguments[0].toLowerCase()) {
                        ei.push(elms[i]);
                    }
                }
            } else if (elms[i].className) {
                ecl = elms[i].className.split(' ');
                for (j=0;j<ecl.length;j++) {
                    if (ecl[j].toLowerCase() == arguments[0].toLowerCase()) {
                        ei.push(elms[i]);
                    }
                }
            }
        }
        return ei;
    }
}
于 2011-12-12T10:01:42.377 に答える
14 
function getElementsByClassName(className) {
if (document.getElementsByClassName) { 
  return document.getElementsByClassName(className); }
else { return document.querySelectorAll('.' + className); } }

これは間違いなくしし座の関数と同じですが、これはdocument.getElementsByClassName可能な場合に使用されます。

于 2011-10-31T15:52:05.047 に答える
10

getElementsByClassName を実際に複製することはできません。これは nodeList を返すため、その値はライブであり、ドキュメントで更新されます。

同じクラス名を共有する要素の静的配列を返すことができますが、ドキュメントがいつ変更されたかを「認識」しません。

(ライブラリを洗練された外観にするのに、この種のものはそれほど多くは必要ありません...)

function getArrayByClassNames(classes, pa){
    if(!pa) pa= document;
    var C= [], G;
    if(pa.getElementsByClassName){
        G= pa.getElementsByClassName(classes);
        for(var i= 0, L= G.length; i<L; i++){
            C[i]= G[i];
        }
    }
    else{
        classes= classes.split(/\s+/);
        var who, cL= classes.length,
        cn, G= pa.getElementsByTagName('*'), L= G.length;
        for(var i= 0; i<cL; i++){
            classes[i]= RegExp('\\b'+classes[i]+'\\b');
        }
        classnameLoop:
        while(L){
            who= G[--L];
            cn= who.className;
            if(cn){
                for(var i= 0; i<cL; i++){
                    if(classes[i].test(cn)== false) {
                        continue classnameLoop;
                    }
                }
                C.push(who);
            }
        }
    }
    return C;
}

//例

var A= getArrayByClassNames('サイドバー ローカル')

于 2011-09-14T04:20:58.617 に答える
9

IE8:

document.getElementsByClassName = function (className) {
    return document.querySelectorAll('.' + className)
}
于 2011-09-14T04:08:46.690 に答える
0 
function _getClass(whatEverClasNameYouWant){
var a=document.getElementsByTagName('*');
   for(b in a){
      if((' '+a[b].className+' ').indexOf(' '+whatEverClasNameYouWant+' ')>-1){
      return a[b];
      }
   }
}
于 2012-02-02T05:21:15.713 に答える