Javascript의 HtmlCollection 대 ​​NodeList

개발자로서 여정의 어느 시점에서 이 오류를 발견했을 수 있습니다.


이 오류가 발생하지 않았다면 언젠가는 발생하게 될 것입니다.

위의 오류는 htmlCollection에서 forEach 배열 메서드를 사용하려고 한 결과 발생합니다.

htmlCollection이란 무엇입니까?

htmlCollection은 DOM에서 추출된 HTML 요소 모음을 나타내는 노드의 실시간 정렬 목록입니다.

htmlCollection은 배열과 매우 유사해 보이지만 그렇지 않습니다. 그렇기 때문에 htmlCollection에서 forEach(), push() 또는 join()과 같은 배열 메서드를 사용하려고 할 때마다 위와 유사한 여러 유형의 오류가 발생합니다.

nodeList와 htmlCollection의 차이점

htmlCollection과 매우 유사한 객체의 또 다른 컬렉션은 nodeList입니다. 둘 다 html 요소의 배열과 같은 목록일 수 있지만 htmlCollection은 라이브 목록이고 nodeList는 라이브 또는 정적일 수 있습니다.

라이브와 정적의 차이점

라이브라는 것은 기본 문서에서 변경된 사항이 htmlCollection에서 자동으로 업데이트된다는 것을 의미하는 반면 정적이라는 것은 DOM에 변경 사항이 있을 때마다 htmlCollection에 영향을 미치지 않는다는 것을 의미합니다.

참고: nodeList는 배열이 아닐 수 있습니다. 그러나 일부 브라우저에서는 forEach() 메서드를 사용하여 nodeList를 반복할 수 있습니다.

DOM의 변경 사항이 htmlCollection의 요소에 영향을 미치지 않도록 하려면 먼저 htmlCollection을 배열로 변환해야 합니다.

htmlCollection을 배열로 변환하는 방법

다음 메소드는 htmlCollection을 배열로 변환하는 데 사용할 수 있는 javascript의 메소드 중 일부입니다.

1. Array.from()

예를 들어 다음과 같은 htmlCollection이 있는 경우:

var headers = document. document.getElementsByClassname(“heading”);

위의 구문은 다음 구문을 사용하여 쉽게 배열로 변환할 수 있습니다.

arrayOfHeaders = Array.from(headers); 

2. 스프레드 연산자(…)

예를 들어:
다음과 같은 htmlCollection을 반환하는 메서드가 있는 경우:

var buttons = document.getElementsByClassname(“button”);

스프레드 연산자를 사용하여 버튼 값을 배열에 입력하고 원하는 경우 변수에 저장할 수 있습니다.

var arrayOfButtons = […buttons];

3. Slice() 메서드

슬라이스() 메서드는 새 배열에 대한 변수를 만들고 다음 메서드를 사용하여 htmlCollection을 변환하는 데 사용할 수 있습니다.

var arr = [].slice.call(document.getElementsByName(“classname”));

NodeList를 반환하는 메서드

document.querySelectorAll()

document.getElementsByName()

htmlCollection을 반환하는 메서드

document.getElementsByClassName()

document.getElementsByTagName()

자세한 설명은 아래 링크를 통해 설명서를 참조할 수 있습니다.

nodeList의 경우: https://developer.mozilla.org/en-US/docs/Web/API/NodeList

htmlCollection의 경우: https://developer.mozilla.org/en-US/docs/Web/API/HTMLCollection

내 블로그 --- https://webcodespace.com/