1. ホーム
  2. javascript

[解決済み] getElementsByClassName を正しく反復処理する方法

2022-04-29 13:41:18

質問

私はJavascriptの初心者です。

私は、ウェブページを window.onload の場合、クラス名で要素の束を見つけなければならない ( slide を、あるロジックに基づいて異なるノードに再分配します。私は、関数 Distribute(element) これは、要素を入力として受け取り、分配を行うものです。私は次のようなことをしたい(例えば、概要のように こちら または こちら ):

var slides = getElementsByClassName("slide");
for(var i = 0; i < slides.length; i++)
{
   Distribute(slides[i]);
}

しかし、これは私のために魔法をかけません、なぜなら getElementsByClassName は実際には配列を返さず NodeList ということである。

...これは私の推測ですが...

関数内部で変更される Distribute (この関数の内部でDOMツリーが変更され、特定のノードのクローンが発生します)。 For-each ループ構造も役に立ちません。

変数slidesの挙動は実に非決定的で、反復するたびに要素の長さや順番が乱暴に変化する。

私の場合、NodeListを反復処理する正しい方法は何でしょうか?一時的な配列に入れることを考えていましたが、その方法がよくわかりません...。

EDITです。

重要なことを言い忘れましたが、1つのスライドが別のスライドの中にある可能性があります。 slides 変数があることを知りました。 アロチ .

私の解決策は、まず各要素を配列にクローン化し、その配列を1つ1つ Distribute() を後から追加しました。

解決方法は?

MDNによると からアイテムを取得する方法です。 NodeList

nodeItem = nodeList.item(index)

このように

var slides = document.getElementsByClassName("slide");
for (var i = 0; i < slides.length; i++) {
   Distribute(slides.item(i));
}

私自身は試していないのですが(通常の for ループはいつもうまくいっています)、試してみてください。