Javascript jQuery selector 비교 정리 querySelectorAll getElements 차이 NodeList, HTMLCollection 차이

 

Javascript jQuery selector 비교 정리 querySelectorAll, getElements 차이 NodeList, HTMLCollection 차이

 

javascript와 jQuery의 selector 를 비교 정리 하는 시간을 갖어 보겠습니다.

jQuery의 selector에 대해서는 아래의 link를 참고하세요.

 

Link : https://aljjabaegi.tistory.com/58

jQuery Selector 셀렉터 사용법

 

1. element의 id 속성으로 접근

 

- Javascript

document.getElementById('요소의id');
document.querySelector('#요소의id');

 

- jQuery

$('#요소의id')

 

 

2. element의 class 속성으로 접근

 

- Javascript

document.getElementsByClassName('요소의class');
document.querySelectorAll('.요소의class');

 

- jQuery

$('.요소의class')

 

 

3. element의 tag 네임 속성으로 접근

 

- Javascript

document.getElementsByTagName('태그명');
document.querySelectorAll("태그명");

 

- jQuery

$('태그명')

 

 

※ querySelectorAll 과 getElement... 의 차이!

querySelectorAll의 경우 NodeList 를 반환하고

getElement... 의 경우 HTMLCollection 을 반환합니다.

 

NodeList와 HTMLCollection 모두 유사배열이고, 동적으로 추가/삭제 된 객체도 바로 반영이 됩니다.

하지만 둘에는 중요한 차이점이 있습니다.

 

HTMLCollection의 경우 Live Collection(동적) 으로 DOM의 변경 요소가 실시간으로 변경됩니다.

하지만 NodeList의 경우 Static Collection(정적) 으로 DOM의 변경 요소가 실시간 변경되지 않습니다.

 

예를 들어 a 라는 클래스 명을 가진 p 태그가 3개 있을 때, 클래스명을 모두 b로 변경해야 된다고 합시다.

 

<p class="a"></p>
<p class="a"></p>
<p class="a"></p>

 

var pTags = document.getElementsByClassName('a');
for(var i=0; i<pTags.length; i++) {
	pTags[i].className = 'b';
}

 

위와 같이 코딩하면 a 클래스가 b 로 모두 변경 될 것 같죠? 하지만 결과는 아래와 같습니다.

 

<p class="b"></p>
<p class="a"></p>
<p class="b"></p>

 

왜 이런 결과가 나올까요? 

getElementByClassName은 Live Collection인 HTMLCollection을 리턴하기 때문입니다.

첫번째 for문에서 p 태그에 접근 하여 class를 b로 바꾸었습니다.

그렇게 되면 실시간 변경이기 때문에 a라는 클래스를 가진 클래스가 2개가 됩니다.

하지만 i는 증감하기 때문에 Index 1을 갖는 3번째 요소의 클래스만 변경하게 되는 것 입니다.

 

이런 문제를 해결하기 위해서는 static Collection 인 Nodelist를 리턴하는 querySelectorAll을 활용하면 됩니다.

 

var pTags = document.querySelectorAll('.a');
for(var i=0; i<pTags.length; i++) {
	pTags[i].className = 'b';
}

 

※querySelector 와 querySelectorAll 의 차이

 

querySelectorAll 은 결과를 NodeList로 리턴

querySelector 는 결과를 가장 첫번째 요소만 리턴