document.querySelectorAll(selector) 함수는 CSS 선택자를 사용하여 HTML 문서 내의 요소를 선택하는 데 사용됩니다.
요소를 선택하지 못하는 이유는 selector의 작성 방법에 있습니다.
selector의 작성 방법은 다음과 같습니다.
- class 선택자 : .class
- id 선택자 : #id
- 태그 선택자 : 태그 이름
- 조합 선택자 : 태그 이름.class, 태그 이름#id
위 코드에서 사용한 selector는 div.class로, class 선택자와 태그 선택자를 조합한 형식입니다.
이러한 selector를 사용하여 요소를 선택하는 데 문제가 발생하는 이유는 class 선택자가 class 이름과 중복되는 경우가 있기 때문입니다.
예를 들어, HTML 문서 내에 div 태그가 여러 개가 있고, 각 태그에 class가 class로 지정되어 있는 경우, document.querySelectorAll('div.class') 함수는 해당 요소를 선택하지 못합니다.
이러한 문제를 해결하기 위해 selector를 수정하여 class 선택자만 사용하거나, 태그 선택자와 class 선택자를 분리하여 사용할 수 있습니다.
예를 들어, selector를 .class로 수정하여 사용할 수 있습니다.
#hostingforum.kr
javascript
const elements = document.querySelectorAll('.class');
console.log(elements);
또는, 태그 선택자와 class 선택자를 분리하여 사용할 수 있습니다.
#hostingforum.kr
javascript
const elements = document.querySelectorAll('div.class');
console.log(elements);
위 코드에서 사용한 CSS 선택자는 다음과 같습니다.
#hostingforum.kr
css
div.class {
background-color: blue;
}
이러한 CSS 선택자는 class 선택자와 태그 선택자를 조합한 형식으로, 위에서 설명한 selector의 작성 방법을 따릅니다.
위 CSS 선택자가 제대로 작동하는지 확인하기 위해, HTML 문서 내에 div 태그를 하나 생성하고, class를 class로 지정합니다.
#hostingforum.kr
html
이러한 HTML 문서를 사용하여, 위에서 설명한 CSS 선택자를 사용하여 요소를 선택하는 데 문제가 발생하지 않습니다.
따라서, 위에서 설명한 selector의 작성 방법을 따르고, selector를 수정하여 class 선택자만 사용하거나, 태그 선택자와 class 선택자를 분리하여 사용할 수 있습니다.
2025-05-31 01:19