JavaScript NodeList를 배열로 변환하는 가장 빠른 방법

이 튜토리얼에서는 JavaScript NodeList를 Array로 변환하는 가장 빠른 방법을 배웁니다. NodeList는 배열과 유사한 구조입니다. DOM(문서 개체 모델) 요소의 모음입니다. 그러나 NodeList 객체에는 "map( )", "filter( )", "slice( )"와 같은 배열 메서드를 사용할 수 없습니다.

NodeList를 배열로 변환하는 방법은 여러 가지가 있지만 작업을 더 빠르게 완료하려면 이 두 가지 방법을 사용하세요. -

• for 루프를 반복하여

• Array.from( ) 함수를 사용하세요

for 루프를 반복하여

JavaScript에서는 for 루프를 사용하여 NodeList를 반복하여 모든 요소가 특정 작업을 수행하도록 할 수 있습니다. 따라서 NodeList를 반복하여 배열에 있는 NodeList의 모든 요소를 ​​복사합니다.

문법

으아악

nodeList의 길이를 변수에 저장하고 그 크기의 배열을 선언합니다. 배열 크기를 알면 고정 크기 배열을 선언하는 것이 좋습니다. 그런 다음 for 루프를 사용하여 배열에 값을 할당합니다.

알고리즘

• 1단계 - nodeList의 길이를 len 변수에 저장합니다.

• 2단계 - 렌즈 크기 배열을 선언합니다.

• 3단계 - for 루프에서 카운터 변수 "i"를 값 0으로 초기화합니다.

• 3.1단계 - "i"가 len과 같지 않을 때까지 루프를 반복합니다.

• 3.2단계 - 업데이트 조건에서 "i"를 1 증가시킵니다.

• 3.3단계 - for 루프 본문에서 NodeList의 i번째 인덱스 값을 배열의 i번째 인덱스에 할당합니다.

예

아래 예에서는 문서 메소드 document.querySelectorAll()을 사용하여 유형 선택기 "div"의 NodeList를 얻습니다. 이 NodeList를 배열로 변환하고 있습니다.

으아악

위 코드에서 사용자는 for 루프를 사용하여 NodeList에서 실제 배열을 생성한 것을 볼 수 있습니다. const를 사용하여 NodeList의 길이를 'len'에 저장하고 'len' 크기의 배열을 선언하면 작업이 더 빨라집니다.

3개의 "div" 요소가 있습니다. 따라서 출력에 표시된 대로 크기가 3인 배열을 얻습니다.

Array.from() 함수를 사용하세요

이 메서드는 반복 가능한 객체 또는 배열 유사 객체의 Array 인스턴스를 만드는 데 사용할 수 있습니다. 배열과 구조가 비슷한 NodeList를 변환하고 있습니다.

ES6(ECMAScript 6)에서는 Array.from() 함수를 사용하여 NodeList에서 배열을 매우 쉽게 가져올 수 있습니다. NodeList를 반복하지 않고 변환만 하고 싶다면 이 방법이 가장 빠른 방법이 될 것입니다.

문법

으아악

여기에서는 Document 메소드의 document.querySelectorAll()을 사용하여 유형 선택기 "p"의 NodeList를 생성했습니다. 이 NodeList를 Array.from() 함수에 매개변수로 전달합니다. 이 함수는 배열을 반환합니다. 이를 배열로 변환하려면 한 줄의 코드만 필요하므로 기억하고 이해하기 쉽습니다.

예

아래 예에서는 유형 선택기 "p"의 NodeList를 생성합니다. Array.from() 함수를 사용하여 이 NodeList를 배열로 변환합니다.

으아악

위 출력에서 ​​사용자는 2개의 "p" 요소가 포함된 배열을 얻었음을 알 수 있습니다. 따라서 NodeList는 단 한 번의 함수 호출을 사용하여 배열로 성공적으로 변환되었습니다.

NOTE - 위의 방법은 모든 최신 브라우저에서 잘 작동하지만 이전 브라우저에서는 제대로 작동하지 않을 수 있습니다.

NodeList를 Array로 변환하는 방법을 배웠습니다. 첫 번째 방법은 NodeList를 반복하여 for 루프를 사용하는 것입니다. 두 번째 방법은 Array.from() 메서드를 사용하는 것입니다. 사용자가 NodeList를 반복하지 않고 변환만 원하는 경우 Array.from() 메서드를 사용하는 것이 좋습니다.

위 내용은 JavaScript NodeList를 배열로 변환하는 가장 빠른 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!