カプセル化された getElementsByClassName メソッド_JavaScript スキルの推奨

ネイティブ JS には getElementsByClassName メソッドが用意されており、これによって指定されたクラスを含むノードのコレクションを取得できることがわかります。つまり、この関数は配列を返します。

ただし、IE はこの方法をサポートしていませんが、この方法は非常に実用的であるため、IE 専用にこのような機能を実装する必要があります。

コードをコピーします コードは次のとおりです:

function getElementsByClassName(oEle,sClass,sEle){
if(oEle.getElementsByClassName){
oEle.getElementsByClassName(sClass);
を返す }その他{
var aEle=oEle.getElementsByTagName(sEle || '*'),
reg=new RegExp('(^|\s)' sClass '($|\s)'),
arr=[],
i=0,
iLen=aEle.length;

for(; i If(reg.test(aEle[i].className)){
arr.push(aEle[i]);
}
}
戻り値;
}
}

使用方法:

コードをコピーします コードは次のとおりです:

//最初のメソッド: ドキュメント
の下にあるクラス box_box を持つすべての div 要素を選択します getElementsByClassName(document,'box_box','div')[0].style.background=' yellow';

//2 番目のオプション: ドキュメント
の下にあるクラス box-box を持つすべての div 要素を選択します getElementsByClassName(document,'box-box','div')[0].style.background=' yellow';

//3 番目の方法: ドキュメント内のすべてのクラスをボックスボックス要素として選択します
getElementsByClassName(document,'box-box')[0].style.background=' yellow';

oEle と sClass は必須ですが、sEle はオプションです。

sClass の水平線や下線には問題はありません。たとえば、box-box box_box; ですが、他の特殊文字の場合は、box$box などの問題が発生する可能性があります。自分で追加します: box\$box…

などの特殊文字をカスタマイズします。

互換性: パーソナルテストie6

お友達、自分で使ってみれば分かりますが、とても使いやすいので他の友達にも広めてください。