JavaScript의 querySelector 완벽 활용 방법 다중선택 id로 요소찾기

안녕하세요 오늘은 JavaScript의 querySelector에 대해서 소개하려고 합니다. 쿼리셀렉터란 DOM(Document Object Model)에서 특정 요소를 선택하는 강력하고 유연한 메서드입니다. 해당 메서드를 사용하면 CSS 선택자를 기반으로 원하는 요소에 쉽게 접근할 수 있습니다. 이번 포스팅에서는 querySelector의 기본적인 사용법과 실제 예시 코드를 통해 어떻게 활용하는지에 대해 살펴보겠습니다.

querySelector 기본 문법

querySelector는 CSS 선택자를 사용하여 DOM에서 요소를 선택합니다. 간단한 예시로 아래와 같이 사용할 수 있습니다.

단일 요소 선택

const element = document.querySelector('.example');

위 코드와 같이 querySelctor를 사용해서 클래스가 "example"인 첫 번째 요소를 선택합니다. 클래스 이외에도 태그 이름, 아이디 등 다양한 선택자를 사용할 수 있습니다.

다중 요소 선택

const elements = document.querySelectorAll('.example');

querySelectorAll을 사용하면 선택자와 일치하는 모든 요소를 NodeList로 반환합니다.

CSS 선택자 활용 예시

CSS 선택자를 활용하면 다양한 조건에 맞게 요소를 선택할 수 있습니다.

아이디 (id) 로 선택

const myElement = document.querySelector('#myId');

위 코드는 아이디가 "myId"인 요소를 선택합니다.

태그 이름으로 선택

const paragraphs = document.querySelectorAll('p');

이렇게 하면 모든 <p> 태그를 선택합니다.

자식 요소 선택

const parent = document.querySelector('.parent');
const child = parent.querySelector('.child');

부모 요소를 먼저 선택한 다음에 내부의 자식 요소를 선택할 수 있습니다.

동적인 상황에서의 활용

querySelector는 동적인 상황에서도 유용하게 사용될 수 있습니다. 예를 들어, 이벤트 핸들러 내에서 특정 요소를 동적으로 선택하는 경우가 있습니다.

이벤트 핸들러 내에서 사용

document.getElementById('myButton').addEventListener('click', function() {
    const selectedInput = document.querySelector('input:checked');
    console.log(selectedInput.value);
});

위 코드는 버튼이 클릭되면 체크된(input:checked) 요소를 선택하여 그 값을 콘솔에 출력합니다.

querySelector를 통해 CSS 선택자를 활용하면 JavaScript로 DOM을 더 쉽게 다룰 수 있습니다. 제 생각에 쿼리셀렉터는 코드를 간결하게 작성하고 유지보수성을 높이는 데 큰 도움이 되는 메서드이기 때문에 유용한 메서드인 것 같습니다.. 예시 코드를 통해 각종 선택자를 활용하는 방법을 익히면, 웹 개발에서 DOM 조작이 더욱 효율적으로 이루어질 것입니다. 여러분들에게 도움이되었으면 좋겠습니다. 오늘도 긴 글 읽어주셔서 감사합니다.

다른글 더보러가기