getElementById
getElementById는 주어진 문자열과 일치한 id 요소를 찾고, 해당하는 element를 반환한다. id는 문서 안에서 유일하기 때문에 특정 요소를 빠르게 찾을 수 있다. 반환 값이 없다면 null을 반환한다.
querySelector
querySelector는 제공한 선택자(id, class, tag 등) 혹은 선택자 뭉치 중 첫번째 요소를 element로 반환한다. 반환 값이 없다면 null을 반환한다.
공통점
1. 특정 요소를 찾아 element를 반환한다.
2. 반환 값이 없다면 null을 반환한다.
차이점
1. getElementById는 ID만 탐색하는 반면, querySelector는 class 혹은 ID를 선택할 수 있다.
2. 상대적으로 getElementById 속도가 더 빠르다.
중론
'querySelector는 2,492,576 Ops/sec, getElementById는 3,011,503 Ops/sec 속도를 보여준다'고 하거나, 'querySelector의 속도는 getElementById보다 6% 정도 더 느릴 뿐 여전히 빠르다'고 하는 등 대다수 의견이 getElementById가 빠르다고 인정하고, 실제 실험 결과도 그러하다. 시간 복잡도도 getElementById는 0(1), querySelector는 0(n)이다. 그럼에도 실제 사용에서 getElementById보다 querySelector가 많이 보이는 이유는 하나같이 같았다. 편리하기 때문이다.
'편리하다'는 점으로 querySelector를 많이 쓰는 이유는 두 메소드의 차이가 실 작동에서 속도 차이가 미미하기 때문인 듯하다. 다른 의견으로는 규모가 작은 웹이라면 getElementById를 사용해 속도를 보장하는 것도 좋아보이나, 코딩 작성과 보수 시 독해 등 그외 모든 부분에서 querySelector가 더 편리하다고 한다.
결론
getElementById가 querySelector보다 빠르다. 다만, 보통의 경우 getElementById만 고집해야할 정도로 속도 차이는 없다.
getElement와 querySelectorAll의 공통점과 차이점(준비중)
※ 잘못된 내용이 있을 경우 댓글로 알려주세요. 배우고 익히고 수정하겠습니다:)
'FE > Javascript' 카테고리의 다른 글
| try & catch (0) | 2022.09.06 |
|---|---|
| async & await (0) | 2022.09.05 |
| REST-API vs GraphQL-API (0) | 2022.09.02 |
| Template literals (0) | 2022.08.31 |
| 함수 선언식, 표현식, 화살표 함수의 공통점과 차이점 (0) | 2022.08.14 |
