JavaScript - 문제 미리보기
문제 778
easy
ID가 "myButton"인 HTML 요소를 찾는 JavaScript 코드는?
정답: B
DOM에서 ID로 요소를 찾는 가장 기본적인 JavaScript 메서드입니다.
기본 DOM 선택 메서드들:
```javascript
// ID로 선택 (하나의 요소 반환)
document.getElementById("myButton")
// 태그명으로 선택 (HTMLCollection 반환)
document.getElementsByTagName("p")
// 클래스명으로 선택 (HTMLCollection 반환)
document.getElementsByClassName("intro")
// CSS 선택자로 선택 (첫 번째 요소만 반환)
document.querySelector("#myButton")
// CSS 선택자로 선택 (모든 일치 요소 반환)
document.querySelectorAll("p.intro")
```
각 옵션 분석:
1. `findById` - 존재하지 않는 메서드
2. `getElementById` ✅ - 표준 DOM 메서드
3. `selectById` - 존재하지 않는 메서드
4. `queryById` - 존재하지 않는 메서드
jQuery와의 비교:
• `jQuery`: `$("#myButton")` - 간단하고 직관적
• JavaScript: `document.getElementById("myButton")` - 조금 더 길지만 표준
실제 사용 예시:
```javascript
const button = document.getElementById("myButton");
button.innerHTML = "Click Me!";
button.style.color = "red";
```
기본 DOM 선택 메서드들:
```javascript
// ID로 선택 (하나의 요소 반환)
document.getElementById("myButton")
// 태그명으로 선택 (HTMLCollection 반환)
document.getElementsByTagName("p")
// 클래스명으로 선택 (HTMLCollection 반환)
document.getElementsByClassName("intro")
// CSS 선택자로 선택 (첫 번째 요소만 반환)
document.querySelector("#myButton")
// CSS 선택자로 선택 (모든 일치 요소 반환)
document.querySelectorAll("p.intro")
```
각 옵션 분석:
1. `findById` - 존재하지 않는 메서드
2. `getElementById` ✅ - 표준 DOM 메서드
3. `selectById` - 존재하지 않는 메서드
4. `queryById` - 존재하지 않는 메서드
jQuery와의 비교:
• `jQuery`: `$("#myButton")` - 간단하고 직관적
• JavaScript: `document.getElementById("myButton")` - 조금 더 길지만 표준
실제 사용 예시:
```javascript
const button = document.getElementById("myButton");
button.innerHTML = "Click Me!";
button.style.color = "red";
```
💡 학습 팁
이 문제를 포함한 JavaScript 과목의 모든 문제를 순차적으로 풀어보세요. 진행상황이 자동으로 저장되어 언제든지 이어서 학습할 수 있습니다.