javascript getElementsByClassName function_javascript スキル

今日、インターネット上で ClassName に基づいて要素を取得するスクリプトを見つけました。今後の使用のためにここに記録します。

コードをコピー コードは次のとおりです。

var getElementsByClassName = function(searchClass, node,タグ) {
if (document.getElementsByClassName) {
return document.getElementsByClassName(searchClass)
} else {
node = ノード || タグ "*" ;
varclasses = searchClass.split(" "),
elements = (tag === "*" && node.all) ? node.getElementsByTagName(tag),
patterns = [],
returnElements = [],
current,
match;
var i =classes.length;
while (--i >= 0) {
パターン。 Push(new RegExp("(^|\s)" クラス[i] "(\s|$)"));
}
var j = elements.length
while (--j) >= 0) {
current = elements[j];
match = false;
for (var k = 0, kl = pattern.length; k match = パターン [k].test(current.className);
if (!match) Break;
if (match) returnElements.push(current); returnElements;
}
}


以下に、インターネット上の他の関連する紹介をいくつか示しますので、合わせて参照してください。 DOM の

GetElementsByClassName については、次のように説明されています。 DOM API には、要素を取得するための 3 つのメソッド (getElementById、getElementsByName、getElementsByTagName) が用意されています。CSS をよく書く人は、当然、それに基づいて要素を取得する方法はあるのかと疑問を持つでしょう。残念ながら、DOM1/2 にはそのようなメソッドはありません。プロトタイプは、非常に早い段階で DOM メソッドを拡張し、メソッド名から判断すると、前の 3 つのメソッドの名前を追加しました。コードを分析すると、依然として getElementsByTagName を通じて実装されていることがわかりました。このメソッドは、すべての要素を走査し、要素にターゲットのスタイル クラス名が含まれているかどうかを検出し、条件を満たす要素の配列を返す必要があるため、エレガントではありません。 Googleで検索しましたが、よりエレガントで効率的な代替手段が見つかりませんでした。

コードをコピー

コードは次のとおりです。 function getElementsByClassName(className,parentElement){ var elems = ($(parentElement)||document.body).getElementsByTagName("*");

var result=[];

for (i=0; j=elems[i]; ){
if ((" " j.className " ").indexOf(" " className " ")!=-1){
result.push(j);
}
}
return result;
}


getElementsByClassName があるため、getElementsByAttribute (例: getElementsByValue、getElementsByStyle、getElementsByType)

コードをコピー

コードは次のとおりです: document.getElementsByClassName = function(className,oBox) { //特定のHTML ブロックに含まれる className

this.d= oBox document;

var Children = this.d.getElementsByTagName('*') ||
var elements = new Array();
for (var ii = 0; ii < Children.length; ii ) {
var child = Children[ii];
var classNames = child.className.split(' ' );
for (var j = 0; j if (classNames[j] == className) {
elements.push(child); ;
}
}
}
return elements;

document.getElementsByType = function(sTypeValue,oBox) {
//同じものを取得するのに適していますHTML ブロック内のコンテンツ 特定のタイプのすべての HTML 要素 (入力、スクリプト、リンクなど)。
this.d= oBox ||
var Children = this.d.getElementsByTagName('* ') || ドキュメント。すべて;
var 要素 = new Array();
for (var ii = 0; ii if (children[ii].type) == sTypeValue) {
elements.push(children[ii]);
}
}
要素を返す;

関数 $() {
var 要素 = new Array( );
for (var ii = 0; ii < argument.length; ii ) {
var 要素 = argument[ii];
if (typeof element == 'string) ')
要素 = document.getElementById(要素);
if (arguments.length == 1)
要素を返す;
}
戻り
}

$Cls = function (s,o){
return document.getElementsByClassName(s,o);

$Type = function (s,o){
return document.getElementsByType(s,o);

$Tag = function (s,o){
this.d=o || document;
return this.d.getElementsByTagName(s);

$Name = function (s){ //name メソッドはドキュメント全体にのみ使用できます。それに限定されます
return document.getElementsByName(s)

;