자바스크립트 getElementBy.., querySelector 차이

2019. 10. 24. 20:32JavaScript

728x90

참고자료: 

https://whatabouthtml.com/difference-between-getelementbyid-and-queryselector-180

 

getElementBy..나 querySelector나 둘 다 DOM 제어에서 사용할 수 있다.

하지만 querySelector가 더 복잡하고 강력하다.

 

getElementby.. querySelector
예) document.getElementById('web-id').innerHTML; 예) document.querySelector('#web-id').innerHTML;

만약에 해당 선택자에 맞는 element가 없다면 null을 반환한다.

해당 선택자에 맞는 element 뭉탱이 중에서 첫번째 놈을 반환한다.

querySelectorAll는 모든 element뭉탱이(= node list)를 반환한다.

* element와 node의 차이? (클릭) 

 

해당하는 것이 없다면 null을 반환한다.

 

인접한 태그들끼리의 상대적인 위치를 비교하여 가져오고 싶다면 querySelector를 써야한다.

예1) document.querySelector('ul li.web-class').innerHTML;

예2) document.querySelector('li.web-class').innerHTML;

처리속도는 getElementBy..가 빠르다.

 

리턴값은 HTMLCollection (name, id, index number로 HTMLCollection의 항목(itmes)들에 접근할 수 있다)

리턴값은 NodeList (index Number로만 NodeList의 항목(items)들에 접근할 수 있다)

 

728x90
반응형