HTML - 문제 미리보기
문제 946
hard
다음 JavaScript 코드의 실행 결과는?
```html
<div class="city">London</div>
<p class="city">Paris</p>
<span class="country">France</span>
<h2 class="city">Tokyo</h2>
```
```javascript
function hideElements() {
var elements = document.getElementsByClassName("_____");
for (var i = 0; i < elements.length; i++) {
elements[i].style.display = "none";
}
}
```
위 함수에서 빈칸에 "city"를 넣고 실행하면 화면에 보이는 요소는?
```html
<div class="city">London</div>
<p class="city">Paris</p>
<span class="country">France</span>
<h2 class="city">Tokyo</h2>
```
```javascript
function hideElements() {
var elements = document.getElementsByClassName("_____");
for (var i = 0; i < elements.length; i++) {
elements[i].style.display = "none";
}
}
```
위 함수에서 빈칸에 "city"를 넣고 실행하면 화면에 보이는 요소는?
정답: B
`getElementsByClassName("city")`는 클래스명이 "city"인 모든 요소를 반환합니다. 이 경우:
• `<div class="city">London</div>` - 숨겨짐
• `<p class="city">Paris</p>` - 숨겨짐
• `<h2 class="city">Tokyo</h2>` - 숨겨짐
`<span class="country">France</span>`는 "city" 클래스가 아닌 "country" 클래스를 가지고 있으므로 선택되지 않아서 화면에 그대로 보입니다. `getElementsByClassName()` 메서드는 지정된 클래스명과 정확히 일치하는 요소들만 선택하며, `style.display = "none"`으로 요소들을 숨깁니다.
• `<div class="city">London</div>` - 숨겨짐
• `<p class="city">Paris</p>` - 숨겨짐
• `<h2 class="city">Tokyo</h2>` - 숨겨짐
`<span class="country">France</span>`는 "city" 클래스가 아닌 "country" 클래스를 가지고 있으므로 선택되지 않아서 화면에 그대로 보입니다. `getElementsByClassName()` 메서드는 지정된 클래스명과 정확히 일치하는 요소들만 선택하며, `style.display = "none"`으로 요소들을 숨깁니다.
💡 학습 팁
이 문제를 포함한 HTML 과목의 모든 문제를 순차적으로 풀어보세요. 진행상황이 자동으로 저장되어 언제든지 이어서 학습할 수 있습니다.