javascript前回の記事で、Live・非Liveなオブジェクトについて記載しました。今回は、Liveなオブジェクトでのlengthの使用方法について記載します。Liveなオブジェクトとlengthプロパティのおさらい前回の記事より、Liveなオブジェクトでは、セレクタを使用してある要素を取得後に、その要素に関連するDOMに変化があった場合(子要素の追加など)、その変更内容が変数にも反映されます。前回の記事からの引用になりますが、以下の例のjavascriptの3、5でlengthプロパティで返る値に注目してください。子要素の数が増えているのが分かります。先のほどの例から、Liveなオブジェクトを参照している、lengthプロパティの値は、DOMが変化することにより、動的に変化することが分かりました。仮にfor文でLiveなオブジェクトを参照している変数のlength分処理を行う場合、処理内容によっては無限ループになる可能性があります。先ほどの例のjavascriptの一部を変更して、以下のようにすると無限ループになります。子要素を追加しています。そのため、lengthプロパティで返される値も増えていき、終了条件が満たされません。いうことは、lengthプロパティを使用する度に計算が行われている可能性があります。そのため、若干のオーバーヘッドがあるかもしれません。Liveなオブジェクトを参照している変数のlengthは使用しない方がいいと思います。上記の処理を書き直すと次のようになります。無限ループにならず処理されます。まとめLiveなオブジェクトでのlengthプロパティ扱い方について記載しました。上記の3の書き方は、一見冗長に見えますが無限ループを回避する重要なコードです。一律でforの終了条件に直接lengthプロパティを使用しない。いうコーディング規約がいいかなとも思います。【JavaScript入門】配列のmapメソッドの使いどころjavascriptの配列のmapメソッドの使用方法や性能について記載しています。記事を読む【JavaScript入門】要素を降順に追加するJavaScriptで要素を降順に追加する方法について記載しています。insertBeforeメソッドと、firstChildプロパティを使用して降順に追加します。記事を読む【JavaScript入門】要素のテキストを設定・取得する方法JavaScriptで、要素の文字列を取得・設定する方法について記載しています。メソッドについて記載しています。記事を読む【JavaScript入門】イベント処理の定義方法JavaScriptでのイベント処理の定義方法について、イベントハンドラ・イベントリスナーそれぞれについて記載しています。getAttribute)JavaScriptでの属性の値の設定・取得方法について記載しています。(setAttribute、getAttribute、要素オブジェクトのプロパティ)記事を読む【JavaScript入門】多くの要素を高速に描画する(DocumentFragment)JavaScriptのDocumentFragmentを使って高速に要素を追加・描画する方法について記載しています。記事を読む【JavaScript入門】delete演算子の使い方javascriptのdelete演算子の使い方について記載しています。記事を読む【JavaScript入門】ローカル変数の独特な振る舞いJavaScriptのローカル変数特有の振る舞いについて記載しています。記事を読む【JavaScript入門】ページ遷移の履歴を残さない方法JavaScriptのLocationオブジェクトを使用して、ページ遷移の履歴を残さない方法(Location.replace)について記載します。記事を読む【JavaScript入門】変数スコープのまとめjavascriptでの変数スコープについてまとめました。コメントをキャンセルメールアドレスが公開されることはありません。