>  기사  >  웹 프론트엔드  >  JavaScript NodeList를 배열로 변환하는 가장 빠른 방법

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

WBOY
WBOY앞으로
2023-08-31 21:01:22917검색

将 JavaScript NodeList 转换为数组的最快方法

이 튜토리얼에서는 JavaScript NodeListArray로 변환하는 가장 빠른 방법을 배웁니다. 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
이 기사는 tutorialspoint.com에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제