JavaScriptで複数の編集ボックスをループアウトする方法

Web アプリケーションの継続的な開発に伴い、ユーザーが 1 ページに複数のフォーム データを入力する必要があるアプリケーションが増えています。これらのフォーム データには、テキスト ボックス、ドロップダウン ボックス、チェック ボックスなどが含まれる場合があります。フロントエンド開発者は、JavaScript を使用してフォーム データを処理する必要があり、複数のフォーム データを処理するために複数の編集ボックスをループアウトできる必要があります。

JavaScript で複数の編集ボックスをループアウトするには、主に 2 つの方法があります。for ループを使用する方法と while ループを使用する方法です。両方の方法を 1 つずつ説明します。

方法 1: for ループを使用する

for ループを使用して、配列および配列のようなオブジェクトを走査します。配列のようなオブジェクトは、長さプロパティと、NodeList や HTMLCollection などのいくつかの数値プロパティを持つオブジェクトを指します。次のサンプル コードは、for ループを使用して、複数の編集ボックスを含む NodeList を走査する方法を示しています。

var textareas = document.querySelectorAll('textarea'); // 获取所有textarea元素
for (var i = 0; i < textareas.length; i++) {
  textareas[i].value = '这是第' + (i+1) + '个编辑框'; // 设置编辑框的值
}

上記のコードでは、最初に querySelectorAll メソッドを使用してすべての textarea 要素を取得し、次に for ループを使用します。これらの要素を横断するために。ループ内では、値属性の設定など、各編集ボックスを操作できます。

方法 2: while ループを使用する

while ループを使用して、配列やリンク リストなどのリストまたはコレクションを走査します。次のサンプル コードは、while ループを使用して、複数の編集ボックスを含む配列を走査する方法を示しています。

var textareas = document.getElementsByTagName('textarea'); // 获取所有textarea元素
var i = textareas.length; // 初始化计数器
while (i--) {
  textareas[i].value = '这是第' + (i+1) + '个编辑框'; // 设置编辑框的值
}

上記のコードでは、最初に getElementsByTagName メソッドを使用してすべての textarea 要素を取得し、次に while ループを使用します。これらの要素を横断するために。ループ内では、値属性の設定など、各編集ボックスを操作できます。

while ループを使用して配列のようなオブジェクトを処理する場合、配列を走査するためにカウンターを使用する必要があることに注意してください。配列のインデックスは 0 から始まり、length プロパティの値は 1 から始まるため、カウンターを配列の長さから 1 を引いた値に初期化する必要があります。

概要

この記事では、JavaScript で複数の編集ボックスをループアウトする 2 つの方法 (for ループを使用する方法と while ループを使用する方法) を紹介します。これら 2 つの方法はさまざまな種類のコレクションに適しており、フロントエンド開発者は特定の状況に応じて適切な方法を選択できます。同時に、どの方法を使用する場合でも、各編集ボックスを操作し、ループを使用して複数のフォーム データを走査することができます。

以上がJavaScriptで複数の編集ボックスをループアウトする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。