querySelector 메소드는 CSS 선택자로 HTML 요소를 찾을 수 있습니다. CSS 선택자는 두 가지 주요 부분으로 나뉩니다. 하나는 Selector, 다른 하나는 Combinator입니다.
Selector는 HTML 요소의 이름, 클래스, 아이디, 속성을 기반으로 요소를 선택하는 방법입니다. 예를 들어, ".class"는 클래스가 "class"인 요소를 선택하고, "#id"는 아이디가 "id"인 요소를 선택합니다.
Combinator는 Selector를 연결하여 더 복잡한 선택자를 만들 수 있습니다. 예를 들어, "div > p"는 div 요소 내의 p 요소를 선택하고, "div p"는 div 요소 내의 모든 p 요소를 선택합니다.
querySelectorAll 메소드는 CSS 선택자로 여러 요소를 반환하는 반면, querySelector 메소드는 단일 요소를 반환합니다. 만약 여러 요소를 반환하고 싶다면 querySelectorAll 메소드를 사용하십시오.
예를 들어, 다음 코드는 HTML 문서 내에서 아이디가 "id"인 요소를 찾습니다.
#hostingforum.kr
javascript
const element = document.querySelector("#id");
만약 아이디가 "id"인 여러 요소를 찾고 싶다면 querySelectorAll 메소드를 사용하십시오.
#hostingforum.kr
javascript
const elements = document.querySelectorAll("#id");
이러한 차이점을 이해하고 querySelector 메소드를 사용하여 HTML 요소를 찾는 방법을 알려드렸습니다.
2025-03-09 14:40