class =” class “で各要素のname属性の値を取得する関数が必要です。パフォーマンスの観点から、これを行うための最良の方法は何かと考えていました。
現在、私はjQueryを使用しており、次のようにしています。
$("#Button").click(function() { var myElements = $(".class"); for (var i=0;i<myElements.length;i++) { alert(myElements.eq(i).attr("name")); } }); アラートは、もちろん、それが何をするかを示すためのものです。次のHTMLの場合：
<input type="checkbox" class="class" name="1"> <input type="checkbox" class="nope" name="2"> <input type="checkbox" class="class" name="3"> 発行されます：
alert("1") alert("3") 純粋なJavascriptを使用する方が速いのか、それとも他の（より良い）方法があるのか疑問に思いました。この質問がこのWebサイトにない場合は、お詫び申し上げます。その場合は、スコープをStackoverflowに移動してください。
コメント
- アラートを常にconsole.logに置き換えてくださいアラートはブロックコードです実行すると、[OK]をクリックするか、結果が見つかった回数だけEnterキーを押す必要があります。
回答
純粋なJSとjQuery
このjsPerf がdocument.getElementByClassNameとjQueryセレクター。ここChrome25の結果は次のとおりです。
-
$(".class")– 4355 1秒あたりの操作数 -
getElementsByClassName("class")– 94636 操作/秒
ご覧のとおり、この単純な操作の場合、jQueryオプションは純粋なJavaScriptの同等のオプションよりも約22倍遅くなります。 jQuery開発ソースを確認すると、これが当てはまる理由を簡単に理解できます。jQueryの「セレクター関数」は非常に一般的であるため、多くのことを行う必要があります。入力が処理される前に、入力が何であるかを確認します。
純粋なJS実装
jQuery clickイベントを終了しましたすでにjQueryに依存しているように見えるので、「イベントをフックする方法を変更する意味はありません。
$("#Button").click(function() { var items = document.getElementsByClassName("class"); for (var i = 0; i < items.length; i++) alert(items[i].name); }); getElementsByClassName
getElementsByClassNameを使用したことにも注意してください。パフォーマンスを重視する場合は、理想的なセレクターを選択することが非常に重要です。特定のクラスのすべての要素に関心があるため、getElementsByTagNameやquerySelectorAllなどの他の要素をすぐに閉じて、構築された関数を選択できます。特定のクラスの要素を見つけるため。
jQueryの実装
これはjQueryを使用した私の実装であり、（つまり、$(this)）。この場合、プレーンJavaScript属性の方がはるかに簡単だからです。
$("#Button").click(function() { $(".class").each(function() { alert(this.name); }); }); コメント
- 完璧。jQueryは好きですがI純粋なJavascriptで簡単に実行できる場合は、避けてください。何らかの理由で、以前は'動作させることができませんでした。おそらく、いくつかのばかげた構文エラーです。
- 同上。すべてのJS機能に頭を悩ませるにはしばらく時間がかかります。必ず、'ブラウザのエラーを確認してデバッグしてください。
-
nameで何をしたいかに応じて、 jQuery s.map()で配列を取得します。 - @RoToRa この場合、ありがとうございます！
回答
保存する代わりに配列の場合、$.each関数を使用してそれらをループできます。このように：
$("#Button").click(function() { $(".class").each( function() { alert( $(this).attr("name") ); } }); 回答
これを行うには「純粋」ですJavaScriptの場合、ES6構文を使用する場合は、次のようにします。
var elements = document.getElementsByClassName("class"); elements.forEach(e => { alert(e.name) }); ES6をサポートしていないブラウザー（IEのすべてのバージョンを含む）の場合：
var elements = document.getElementsByClassName("class"); elements.forEach(function(e) { alert(e.name); }); IE8サポートが必要な場合：
var elements = document.querySelectorAll(".class"); for (var i = 0; i < elements.length; i++) { alert(elements[i].name); } jQueryを使用する場合に比べて少し高速になります。ただし、jQueryは引き続き最短のコードです。
$(".class").each(e => { alert(e.name); }); コメント
- ありがとうございます。コメントセクションで使用されるため、100以上の要素を扱っている可能性があります。 '両方のコードでベンチマークを実行し、すべてが完了したらフィードバックを提供します。代わりに
document.getElementsByClassName()とforループを使用できるかどうか疑問に思いました。試しましたが、'動作しませんでした。同じforループとdocument.getElementsByClassName('class')[i].name
回答
document.querySelectorAllを使用して、目的の要素を取得できます。
var namedEls = document.querySelectorAll("input.class"); for (var i=0;i<namedEls.length;i+=1){ console.log(namedEls[i].name); } //=> 1, 3 または、1つのライナーとしてArray：
var names = [].slice.call(document.querySelectorAll("input.class")) .map(function(el){return el.name}); //=> names is now [1,3] コメント
- なぜ
input[class="class"]ではなくinput.class？ （特に複数のクラスを持つ要素を除外する場合を除きます。） - 特に理由はないので、回答を変更しました。 '結果は変更されません。
回答
parent.querySelectorAll([name="value"]); Domの知識によっては、非常に効率的です。検索する親ノードを選択するか、特定のDomの知識がない場合はドキュメントに移動することができます。
カスタム要素またはカスタム名前空間を使用する場合、非常に強力であり、ライブラリのアドオンは必要ありません。最新のすべてのブラウザで動作します。
プラットフォームは成長しており、驚くべきことができるようになりました。