document.querySelector(selector) 함수는 HTML 요소를 선택하기 위한 메서드입니다.
selector의 형식은 다음과 같습니다.
- 태그 이름: 태그 이름만 입력하면 해당 태그의 모든 요소를 선택할 수 있습니다. 예를 들어, 'div'를 입력하면 모든 div 태그의 요소를 선택할 수 있습니다.
- id: '#' 기호를 사용하여 id를 선택할 수 있습니다. 예를 들어, '#id'를 입력하면 id가 'id'인 요소를 선택할 수 있습니다.
- class: '.' 기호를 사용하여 class를 선택할 수 있습니다. 예를 들어, '.class'를 입력하면 class가 'class'인 요소를 선택할 수 있습니다.
- 여러 요소: 여러 요소를 선택하려면 ',' 기호를 사용하여 요소들을 연결할 수 있습니다. 예를 들어, 'div, span, p'를 입력하면 div, span, p 태그의 모든 요소를 선택할 수 있습니다.
예를 들어, 다음 코드는 id가 'header'인 요소를 선택합니다.
#hostingforum.kr
javascript
document.querySelector('#header');
다음 코드는 class가 'header'인 요소를 선택합니다.
#hostingforum.kr
javascript
document.querySelector('.header');
다음 코드는 div 태그의 모든 요소를 선택합니다.
#hostingforum.kr
javascript
document.querySelector('div');
다음 코드는 id가 'header'인 요소와 class가 'header'인 요소를 선택합니다.
#hostingforum.kr
javascript
document.querySelector('#header, .header');
document.querySelector(selector) 함수는 여러 요소를 선택할 수 있습니다. 단, 선택한 요소는 첫 번째 요소만 반환합니다. 만약 여러 요소를 선택하려면 document.querySelectorAll(selector) 함수를 사용해야 합니다.
예를 들어, 다음 코드는 id가 'header'인 요소를 선택합니다.
#hostingforum.kr
javascript
document.querySelectorAll('#header');
이 코드는 id가 'header'인 모든 요소를 선택하고 NodeList 객체를 반환합니다.
#hostingforum.kr
javascript
const elements = document.querySelectorAll('#header');
console.log(elements); // NodeList(1) [header]
2025-05-28 19:02