ホームページ > ウェブフロントエンド > jsチュートリアル > javascript getElementsByClassName 実装コード_javascript スキル

javascript getElementsByClassName 実装コード_javascript スキル

WBOY
リリース: 2016-05-16 18:18:43
オリジナル
1039 人が閲覧しました

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

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

/*
* 要素 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.
関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート