자바스크립트에서 여러 편집 상자를 반복하는 방법

웹 애플리케이션이 지속적으로 개발됨에 따라 점점 더 많은 애플리케이션에서 사용자가 한 페이지에 여러 양식 데이터를 입력해야 합니다. 이러한 양식 데이터에는 텍스트 상자, 드롭다운 상자, 확인란 등이 포함될 수 있습니다. 프런트엔드 개발자는 양식 데이터를 처리하기 위해 자바스크립트를 사용해야 하며, 여러 양식 데이터를 처리하기 위해 여러 편집 상자를 반복할 수 있어야 합니다.

JavaScript에서 여러 편집 상자를 반복하는 두 가지 주요 방법은 for 루프를 사용하는 것과 while 루프를 사용하는 것입니다. 두 가지 방법을 하나씩 다루겠습니다.

방법 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 메서드를 사용하여 모든 텍스트 영역 요소를 가져온 다음 for 루프를 사용하여 이러한 요소를 탐색합니다. . 루프에서는 value 속성을 설정하는 등 각 편집 상자에 대해 작업을 수행할 수 있습니다.

방법 2: while 루프 사용

while 루프를 사용하여 배열이나 연결 목록과 같은 목록이나 컬렉션을 순회합니다. 다음 샘플 코드는 while 루프를 사용하여 여러 편집 상자가 포함된 배열을 탐색하는 방법을 보여줍니다.

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

위 코드에서는 먼저 getElementsByTagName 메서드를 사용하여 모든 텍스트 영역 요소를 가져온 다음 while 루프를 사용하여 이러한 요소를 탐색합니다. . 루프에서는 value 속성을 설정하는 등 각 편집 상자에 대해 작업을 수행할 수 있습니다.

while 루프를 사용하여 배열과 유사한 객체를 처리할 때 배열을 순회하기 위해 카운터를 사용해야 한다는 점에 유의해야 합니다. 배열의 인덱스는 0부터 시작하고 length 속성의 값은 1부터 시작하므로 카운터를 배열의 길이에서 1을 뺀 값으로 초기화해야 합니다.

요약

이 문서에서는 여러 편집 상자를 반복하는 자바스크립트의 두 가지 방법, 즉 for 루프 사용과 while 루프 사용을 소개합니다. 이 두 가지 방법은 다양한 컬렉션 유형에 적합하며, 프런트엔드 개발자는 특정 상황에 따라 적합한 방법을 선택할 수 있습니다. 동시에 어떤 방법을 사용하든 각 편집 상자에서 작업을 수행하고 루프를 사용하여 여러 양식 데이터를 탐색할 수 있습니다.

위 내용은 자바스크립트에서 여러 편집 상자를 반복하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!