방방이네 블로그

getElementById()와 querySelector()는 모두 JavaScript에서 DOM(Document Object Model)을 조작하기 위해 사용되는 메서드입니다. 그러나 두 가지 메서드 간에는 몇 가지 중요한 차이점이 있습니다.

선택 방법:
getElementById(id): getElementById()는 HTML 문서 내에서 특정 id 속성 값을 가진 요소를 선택합니다. 이 메서드는 문서 내에서 해당 id 값과 정확히 일치하는 요소를 반환합니다. id는 문서 전체에서 고유해야 합니다.
querySelector(selector): querySelector()는 CSS 선택자를 사용하여 요소를 선택합니다. CSS 선택자를 사용하므로 id 외에도 클래스, 요소 이름, 속성 등 다양한 방식으로 요소를 선택할 수 있습니다.
반환 값:
getElementById(id): getElementById()는 일치하는 id를 가진 요소 중 첫 번째 요소를 반환합니다. 따라서 반환 값은 단일 요소입니다.
querySelector(selector): querySelector()는 일치하는 요소 중 첫 번째 요소를 반환합니다. 따라서 반환 값은 단일 요소입니다.
브라우저 호환성:
getElementById(id): getElementById()는 모든 최신 브라우저에서 지원되는 표준 DOM 메서드입니다.
querySelector(selector): querySelector()는 대부분의 최신 브라우저에서 지원되지만, 오래된 브라우저에서는 지원되지 않을 수 있습니다. 또한, querySelector()는 복잡한 선택자와 일치하는 요소를 찾는 데에는 querySelectorAll()에 비해 성능이 약간 떨어질 수 있습니다.
따라서, 간단한 id 값으로 요소를 선택하고자 할 때는 getElementById()를 사용하는 것이 효율적입니다. 하지만 복잡한 선택자 또는 다양한 속성에 기반한 요소를 선택해야 할 때는 querySelector()를 사용하는 것이 유용합니다.