JavaScript - 문제 미리보기
문제 781
medium
다음 코드는 특정 태그와 클래스를 동시에 만족하는 요소를 찾습니다. 빈칸에 들어갈 올바른 메서드는?
```javascript
// jQuery
myElements = $("p.intro");
// JavaScript
myElements = document._______("p.intro");
```
정답: B
CSS 선택자를 사용하여 복합 조건으로 요소를 선택하는 현대적인 JavaScript 메서드입니다.
CSS 선택자 활용:
선택자 패턴:
```javascript
"p.intro" //
태그이면서 class="intro"인 요소 "div#main" //
태그이면서 id="main"인 요소
".intro p" // class="intro" 안에 있는 모든
태그 "p, div" // 모든
태그와 모든
태그
```
querySelector vs querySelectorAll:
```javascript
// 첫 번째 일치하는 요소만 반환
const firstElement = document.querySelector("p.intro");
// 모든 일치하는 요소들을 NodeList로 반환
const allElements = document.querySelectorAll("p.intro");
```
jQuery와의 비교:
```javascript
// jQuery (항상 모든 일치 요소 반환)
$("p.intro") // jQuery 객체
// JavaScript
document.querySelector("p.intro") // 첫 번째 요소만
document.querySelectorAll("p.intro") // 모든 요소들
```
NodeList vs HTMLCollection:
```javascript
// querySelectorAll → NodeList (forEach 사용 가능)
const nodeList = document.querySelectorAll("p.intro");
nodeList.forEach(element => {
console.log(element.innerHTML); // ✅ 작동
});
// getElementsByClassName → HTMLCollection (forEach 불가)
const htmlCollection = document.getElementsByClassName("intro");
// htmlCollection.forEach() // ❌ 오류 발생
```
실용적 활용:
```javascript
// 복잡한 선택자도 가능
document.querySelectorAll("div.container > p.intro:first-child");
document.querySelectorAll("input[type='text']:not([disabled])");
document.querySelectorAll("li:nth-child(odd)");
```
💡 학습 팁
이 문제를 포함한 JavaScript 과목의 모든 문제를 순차적으로 풀어보세요. 진행상황이 자동으로 저장되어 언제든지 이어서 학습할 수 있습니다.