document.querySelectorAll(selector) 함수는 HTML 문서 내의 요소를 선택하는 데 사용됩니다.
selector는 CSS 선택자와 유사한 규칙을 따릅니다.
- 태그 이름: HTML 태그 이름을 사용할 수 있습니다. 예를 들어, 'div' 또는 'p'를 사용할 수 있습니다.
- 클래스 이름: 클래스 이름을 사용할 수 있습니다. 예를 들어, '.class-name'을 사용할 수 있습니다.
- 아이디: 아이디를 사용할 수 있습니다. 예를 들어, '#id-name'을 사용할 수 있습니다.
- 속성: 속성을 사용할 수 있습니다. 예를 들어, '[속성 이름]'을 사용할 수 있습니다.
- 선택자 조합: 여러 선택자를 조합하여 사용할 수 있습니다. 예를 들어, 'div.class-name' 또는 '#id-name > div'를 사용할 수 있습니다.
특정 요소 선택 시 사용할 수 있는 속성은 다음과 같습니다.
- 부모 요소: '>', ' ', 또는 '+'를 사용하여 부모 요소를 선택할 수 있습니다. 예를 들어, 'div > p' 또는 'div p'를 사용할 수 있습니다.
- 자식 요소: '>', ' ', 또는 '+'를 사용하여 자식 요소를 선택할 수 있습니다. 예를 들어, 'div > p' 또는 'div p'를 사용할 수 있습니다.
- 형제 요소: '+'를 사용하여 형제 요소를 선택할 수 있습니다. 예를 들어, 'div + p'를 사용할 수 있습니다.
- 가상 클래스: ':active', ':hover', ':focus', ':visited', ':link', ':first-child', ':last-child', ':only-child', ':nth-child(n)', ':nth-last-child(n)', ':first-of-type', ':last-of-type', ':only-of-type', ':nth-of-type(n)', ':nth-last-of-type(n)'를 사용할 수 있습니다.
- 가상 요소: '::before', '::after', '::first-letter', '::first-line', '::selection'을 사용할 수 있습니다.
예를 들어, 다음과 같은 선택자를 사용할 수 있습니다.
- 'div.class-name': 클래스 이름이 'class-name'인 div 요소를 선택합니다.
- '#id-name': 아이디가 'id-name'인 요소를 선택합니다.
- '.class-name > p': 클래스 이름이 'class-name'인 div 요소의 자식 요소인 p 요소를 선택합니다.
- 'div > .class-name': 클래스 이름이 'class-name'인 div 요소의 자식 요소인 요소를 선택합니다.
- 'div + p': div 요소 바로 다음에 있는 p 요소를 선택합니다.
- ':hover': 마우스 호버 시 선택합니다.
- '::before': 요소의 앞에 가상 요소를 선택합니다.
2025-06-18 07:13