Javascript DOM 객체 조작 (Live, Static Collection)

 

 DOM객체 조작을 공부 중에 유용한 정보를 찾게되어 포스팅하게 되었다.

DOM 요소를 가져오기 위해 쓰이는 흔한 방법 중

document.querySelectorAll('#id or .class'); 은 NodeList라는 유사배열 객체에 담겨 반환된다.


대부분의 NodeList가 비정적(Live) 콜렉션인데 반해, querySelectorAll()로 가지고 온 NodeList는 정적(Static) 콜렉션이다.

때문에, querySelectorAll()로 가지고 온 NodeList는 우리가 조작한 DOM의 변경 사항이 실시간으로 반영되지 않는다.

(실제로는 배열 내의 변화가 생겨도 변환되지 않은 상태 그대로 반환이 된다.)

또, document.querySelector('#id or .class').children; 은 HTMLCollection으로 반환되는데,

이는 유사배열이자 비정적(Live) 콜렉션이다.

때문에, HTMLCollection은 실시간으로 배열 내의 변경사항이 반영된다.

HTMLCollection은 위의 예시와 같이 element.children과

document.getElementsByClassName(),

document.getElementsByTagName() 를 사용해서도 반환된다.

** 정적과 비정적 콜렉션을 구분해서 써야하는 이유는

for문으로 배열 내의 여러 객체를 순서대로 조작할 때에

for문에서 배열 내의 요소를 기준으로 조작을 해야하는데 ( ex. 객체.length )

해당 배열이 비정적(Live) 콜렉션이라면 배열의 상태가 실시간으로 변화하기 때문에

원하는데로 결과가 나오지 않을 수 있기 때문이다. **

자세한 예시는 아래의 블로그를 통해 볼 수 있다ㅏㅏㅏ

참고 : im-developer.tistory.com/110 [Code Playground]

[JS/DOM] 자바스크립트, 돔 조작 시 주의할 점 (Live Collection vs Static Collection)