JavaScript에서의 유사 배열 타입 간의 차이점

두 유사 배열 타입 간의 차이점은 DOM 요소가 변경될 때의 서로 다른 동작 방식에 있습니다. 예를 들어, 우리가 단락(paragraph) 컬렉션을 HTMLCollection 형태와 NodeList 형태로 얻었다고 가정해 봅시다. 그런 다음 우리가 또 다른 단락을 생성하여 DOM에 추가합니다. 이 경우, 새 단락은 자동으로 HTMLCollection에 나타나지만, NodeList 컬렉션은 변경되지 않은 채로 남아 있습니다.

예제를 통해 살펴보겠습니다. div와 그 안에 몇 개의 단락이 있다고 가정합니다. div와 동일한 단락들을 두 가지 다른 타입의 컬렉션으로 얻어봅시다:

let parent = document.querySelector('div');
let elems1 = document.getElementsByTagName('p'); // HTMLCollection
let elems2 = document.querySelectorAll('p');     // NodeList

div에 또 다른 단락을 추가해 봅시다:

let p = document.createElement('p');
parent.append(p);

결과적으로, 한 컬렉션은 변경되고 다른 하나는 변경되지 않습니다:

console.log(elems1); // 4개의 단락 - 새로운 단락 포함
console.log(elems2); // 초기의 3개 단락

새 요소가 추가될 때 children 속성이 어떻게 동작하는지 확인해 보세요.

새 요소가 추가될 때 childNodes 속성이 어떻게 동작하는지 확인해 보세요.