問題タブ [htmlcollection]

ES6 では、イテラブルはを許可するオブジェクトでfor... ofあり、Symbol.iterator キーを持ちます。

配列はセットやマップと同様にイテラブルです。問題は、HTMLCollectionとNodeListはイテラブルなのかということです。彼らはそうあるべきですか？

MDN のドキュメントでは、aNodeListがイテラブルであることを示唆しているようです。

for...ofループは NodeList オブジェクトを正しくループしますfor...of(Firefox 13 以降など) 。

これは、Firefox の動作を裏付けているようです。

私は Chrome と Firefox の両方で次のコードをテストしましたが、Firefox はそれらがイテラブルであると認識しているように見えて驚きましたが、Chrome はそうではありません。さらに、Firefox は、HTMLCollectionとによって返されるイテレータNodeListが同一で​​あると考えます。

本当に奇妙で紛らわしいことが 1 つあります。コード スニペットを実行すると、それをコピーして Firefox の実際のファイル/コンソールで実行した場合とは異なる結果が生成されます (特に最後の比較)。ここでのこの奇妙な動作に関する啓発も歓迎します。

test.html

eles が HTMLCollenction を表していることを確認しました。

ここでは、HTMLCollection もそのメンバーを名前とインデックスの両方でプロパティとして直接公開すると述べています。

ということで、console.log(eles.length)とconsole.log(eles[0])でデバッグしてみました。残念ながら、コンソールには 0 と undefined が表示されます。(Google Chrome Tool Developer を使用)

eles の結果にアクセスするにはどうすればよいですか? ClassNameで取得したタグにスタイルを変更して属性を追加したい。さらに、自然な Javascript しか使用できません。

ES6構文とBabelトランスパイラーでReactjsを使用しています。

ES5 構文を使用すると、期待どおりの結果が得られます。

console.log 出力

しかし、 for...of ループを使用すると

Babel はこのコードを

エラーが発生します

キャッチされていない TypeError: propInputs[Symbol.iterator] は関数ではありません

配列のようなオブジェクトを実際の配列に変換する必要があります。要素のリストを取得するために getElementsByTagName を使用しています。

Chrome ではtablerowArr、同じ数のアイテムを持つ配列に正しく変換されます。ただし、Firefox と IE では、アイテムは 0 です。

私は間違って何をしていますか?

注：使用できるようにこれを行っています

<tr>をクリックしたときに DOM に変更を適用しようとしています。クリックすると、適用中にクリックされたものにdata-state=enabledandが追加され、その他すべてに追加されます。data-display=expanded<tr>data-state=disableddata-display=collapsed <tr>

したがって、クリックした行を強調表示し、他の行を無効にするように見えるはずです。

次に、行が強調表示され、ユーザーが他の場所をクリックすると、デフォルトにリセットされます。つまりdata-state=enabled、data-display=collapsedすべて<tr>の

現在、 a<tr>をクリックすると、その行が強調表示され、他のすべてが無効になるように機能しています。ただし、スクリプトにはデフォルトへのリセットがありません。別の<tr>ものがクリックされると、すぐにその 1 つが強調表示され、残りが無効になるためです。

これをバニラ JavaScript で実行したいと考えていますが、jQuery を使用する方がはるかに簡単で、パフォーマンスに大きな影響を与えない場合は、jQuery を使用することもできます。

これは、それがどこにあるかを確認するための作業コードを含む JSbin です: https://jsbin.com/kirati/

そして、これまでのコード:

そしてジャバスクリプト

Javascript で、新しい div を作成しようとしています。これは、divを作成するために追加したものです。

しかし、私のブラウザでは、div タグがあるべき場所に [object HTMLCollection] が表示されます。

コンサートは事前定義された変数です。

この仕事をするために私が欠けているかもしれないものを誰かが私に説明できますか? 前もって感謝します。

次のコードを検討してください。

これは期待どおりに機能し、見つかった要素をすべて削除します。次のコードを検討してください。

見つかった要素の半分だけを削除しています。これは何が原因ですか？

を使用して要素を検索するdocument.getElementsByTagName()と、HTMLCollection. 要素にids がある場合、出力にはindexとidを持つ要素が含まれます。

問題は、この構造はすべてのブラウザで一定のままなのか、それとも変化するのかということです。

例

Nicholas Zakasによると、特に HTMLCollection は非常に遅いため、メンバーに繰り返しアクセスする場合は、全体を配列にコピーすることをお勧めします。彼は、HTMLCollections でインデクサーを使用しても、コレクションが要素に直接つながるポインターのリストではなく、実際には linq-esq 式ツリーであるかのように、コレクションがすべての一致する要素に対して DOM を完全に再クエリするようになると主張しているようです。

テーブルをキーボードで簡単に操作できるようにする必要がある状況があります。誰かが矢印キーの 1 つを押すたびに、ある表のセルから別の表のセルにフォーカスを切り替え、それに応じて CSS クラスを追加および削除する必要があります。によって返されたテーブル行の HTMLCollection を格納し、tableElement.rowsそれを介して個々のセル要素にアクセスすることを考えました。HTMLCollection を使用すると、それらが配列であるかのようにインデックスを作成できることを知っています。これは、配列にインデックスを作成するのと同じくらい効率的であると思いました。今、私は物事を再考していますが、それでも理由を理解したいと思っています.

私の質問は次のとおりです。電話をかけると、内部で正確に何が起こりますtableElement.rows[2].cells[6]か?