javascript getElementsByClassName 実装コード_javascript スキル-jsチュートリアル-php.cn

javascript getElementsByClassName 実装コード_javascript スキル

WBOY

リリース： 2016-05-16 18:18:43

オリジナル

1021 人が閲覧しました

まずコードを見てみましょう: (複数のクラスのクエリと特定の範囲内のクエリをサポートします)

コードをコピーコードは次のとおりです。次のように:

 
/* 
* 要素 clsssName に従って要素コレクションを取得します 
* @param FatherId 親要素の ID、デフォルトは document 
* @ tagName 子要素のタグ名 
 * @className スペースで区切られた ClassName 文字列 
*/ 
function getElementsByClassName(fatherId,tagName,className){ 
node = FatherId&&document.getElementById(fatherId) ||ドキュメント; 
タグ名 = タグ名; 
クラス名 = クラス名.長さ; ;i//クラス名の通常の一致を作成します
className[i]= new RegExp("(^|\s)" className[i].replace(/-/g , "\-") "(\s |$)"); 
} 
var 結果 = []; 0,j=elements.length,k= 0;ivar element = elements[i] 
while(className[k ].test(element.className) )){//最適化ループ
 if(k === classNameLength){ 
result[result.length] = 要素; 
} 
} 
k = 0 ; 
} 
結果を返します 
} 

 
それでは、テストしてみましょう: 

コードをコピーします>

コードは次のとおりです:

コードをコピーします

コードは次のとおりです: window.onload = function(){ alert(getElementsByClassName(document,"div ","aaa ccc").length);//2 alert(getElementsByClassName("container","div","aaa ccc") .length);//1 alert(getElementsByClassName("container ","span","aaa zzz").length);//1

}

 
結果を取得正しく。 
ネイティブ getElementsByClassName 
ネイティブ メソッドを呼び出すのが最も効率的であるのに、なぜ最初にネイティブ メソッドを呼び出してからカスタム メソッドを呼び出さないのかと疑問に思う人もいるかもしれません。 
はい、ネイティブの効率は非常に高く、複数のクラス条件を含むクエリをサポートしていますが、最大の問題は、タグの指定が必要な getElementsByClassName("container", "div", "aaa ccc") をサポートしていないことです。 . 指定された要素が指定されたクラスに属する状況を検索します。 
したがって、ネイティブ メソッドの呼び出しはここでは放棄されます。 

ループの最適化について
コードでは、効率を向上させるために配列の長さをキャッシュしていることがわかります。実際、ここには非常に隠れた問題があります。つまり、配列の長さプロパティへのアクセスと HtmlCollection の長さへのアクセスには大きな違いがあります。配列では、length は通常のプロパティであり、アクセス時に追加の操作は実行されません。HTMLCollection を配列として使用することがよくありますが、実際には DOM 構造に応じて自動的に変更されるエンティティです。。物体。 HTMLCollection オブジェクトのプロパティにアクセスするたびに、DOM 内のすべてのノードで完全な一致が実行されます。つまり、HtmlCollection オブジェクトの長さにアクセスするたびにコレクションオブジェクトが更新されるため、パフォーマンスが大幅に消費されます。したがって、通常の状況では、この種の HtmlCollection のループ操作の長さをキャッシュすることをお勧めします。
追加の利点
これは、要素を配列に配置する方法間の効率の比較です
コードを見てください:

コードをコピー

コードは次のとおりです: //メソッド 1 var arr = []; var start = new Date(); =0;iarr.push(i);

}

//メソッド 2
var arr = [] 
var start = new Date () ; 
for(var i=0;iarr[arr.length]=i; 


Guess which one is more efficient! After testing, the second method is more efficient than the first. 
Reminder: 
This version is not compatible with IE5. The following is my explanation: 
1. When you look at the statistics of a few thousandths, look at the crazy money IE5 testers With so many clicks and the curiosity of professional programmers towards IE5, it is estimated that only the ashes left after IE5 was burned. 
2. You have to believe that the use value of ashes tends to zero
3. If you haven’t been convinced yet, then I want to say that you are very professional! In this case, there are still IE3, IE2, IE?FF1,NN4..., I think you should implement them all. 
Some confession: I can't convince myself very much. Alas, let's give a solution for IE5: 
IE5 does not support the getElementByTagName("*") form, so I need to deal with it here: 
var elements = (tagName===='*'&&node.all)?node.all:node.getElementsByTagName(tagName); 
Okay, not much to say, this function is simple and practical, I also wrote the code After reading the comments, there should be no problem.