자바스크립트 getElementBy.., querySelector 차이
2019. 10. 24. 20:32ㆍJavaScript
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)를 반환한다.
해당하는 것이 없다면 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
반응형
'JavaScript' 카테고리의 다른 글
| 자바스크립트 canvas API (0) | 2019.11.08 |
|---|---|
| element, node 차이. Collection, NodeList 차이 (1) | 2019.10.24 |
| jquery.min.js 다운 받는 법 (0) | 2019.10.24 |
| 크롬 익스텐션 만들기 (0) | 2019.10.17 |
| 자바스크립트 비동기 처리 활용 예 (0) | 2019.10.16 |