[JavaScript] Static / Live Collection, Selector와 ElementBy 차이.

@ getElementBy와 querySelector의 차이점 

1. "querySelector"는 지정한 그룹과 일치하는 document안의 첫번째 값 을 반환한다.
   • "querySelectorAll"은 지정된 모든 값 을 부른다.
2. "getElementBy-"는 By 뒤의 키워드(id,class...)를 통해 일치하는 값 을 반환한다.
3. 두 명령어 모두 일치하는 값이 없다면 null을 반환한다.
4. 두 명령어의 다른점은 반환되는 형태가 "Node List"냐 "HTMLCollection"이냐에 있다.

---

@ NodeList VS HTMLCollection( Live & Static Collection ) 

% NodeList

   => element.childNodes나 querySelectorAll( )과 같은 메소드에 의해 반환되는 Node Collection .

   => 우선 위에서 언급한 "NodeList"는 대부분 Live(동적) Collection에 해당되지만, SelectAll( )에 의해 반환된 값은 Static(정적) Collection이다.

   => "NodeList"는 배열(Array)와 유사하나, 배열과는 다르다. 때문에, 배열에 사용되는 메소드는 대부분 사용할 수 없으며, 사용하기 위해서는 실제 배열로 변환하는 등의 우회적인 방법이 필요하다.  => 이런걸 유사 배열이라 한다.

 

 

 

% HTMLCollection

   => NodeList와 마찬가지로 유사 배열이며, Element 문서 내 순서대로 정렬된 일반 Collection을 나타낸다.

   => element.children과 같은 속성이나, getElementBy~와 같은 메소드에 의해 반환된다.

   => Index로만 접근할 수 있는 NodeList와 다르게,  HTMLCollection은 name, ID, index 등의 항목으로 접근 가능.

   => HTMLCollection은 Live(동적) Collection이다.

 

 

 

 

---

%Live(동적) VS Static(정적) Collection

  => 결론적으로 말하면, "동적"은 DOM의 변경사항이 실시간 반영되며, "정적"은 실시간 반영되지 않는다.

 

아래 예시로 동적 Collection 먼저 확인해보자.

 

"getElementByClassName"을 사용, 3개의 List를 담는 객체를 생성하여 Console 창에 출력해보았다.

 

Console창에 보면, 위에 설명했듯이 HTMLCollection으로 반환됨을 확인할 수 있다. 여기서

만일 내가, 각 List를 하나씩 Class명을 <style> 태그에 설정된 "greenyellow"로 하나씩 바꿔보았다.

 

 

변한점은

 => 기존의 3개였던 HTMLCollection이 한개로 줄어버렸다!

 => 난 3개 다 바꿨는데 가운데는 바뀌지 않았다.

 

결론적으로 말하면, Live Collection은 DOM의 변경사항에 따라 실시간으로 반영된다 .

때문에, 첫번째 값이 기존의 유사 배열에서 이탈하며 "purple"을 담고있는 녀석의 길이가 줄어버렸다.

그러면서, 2번째가 바뀔 차례였으나, 3번째 값이 바뀌고 반복문이 종료된것.

 

이를 그림으로 표현해보면

이런식으로 실시간 반영 -> 길이 감소 -> 반복 횟수 감소 -> 인덱스 순서 바뀜 -> 가운데 건너 뜀

과 같은 결과가 나오는 것.

 

---

그러면 정적 Collection을 확인해보자.

 

 

 

   => NodeList로 반환되었으며, 메서드는 querySelectorAll( )을 사용하였다.

 

 

이를 위와 마찬가지로 반복문을 통해 Class 명을 바꿔본다.

동적 Collection과 다른 점은

   => NodeList의 길이가 그대로 3이다.

   => 모든 태그가 원하는 결과가 되었다. ( 색이 바뀜 )

   => NodeList안의 각 값들은 Class명만 바뀌었다.

 

이러한 결과를 볼 수 있다.

---

정리하자면

1. DOM의 변경사항에 있어 동적(Live) Collection은 실시간 반영되며, 정적(Static) Collection은 실시간 반영 X
2. querySelector~는 NodeList를 getElementBy~는 HTMLCollection을 Return한다.
3. HTMLCollection은 Live Collection이다.
4. NodeList는 대개의 경우 Live Collection이지만, querySelectorAll( ) 메소드에 의한 결과는 Static Collection이다.
5. 기본적으로 속도는 getElementBy가 빠르고 지원이 잘된다. 비교적 querySelector가 최근에 나왔다고 한다.