JavaScript - 문제 미리보기
문제 717
hard
다음 코드의 실행 순서와 최종 결과로 올바른 것은?
```javascript
console.log("1단계: " + document.getElementById("test").innerHTML);
document.getElementById("test").innerHTML = "변경된 내용";
console.log("2단계: " + document.getElementById("test").innerHTML);
document.getElementById("test").setAttribute("class", "highlight");
console.log("3단계 클래스: " + document.getElementById("test").className);
const img = document.getElementById("myImg");
console.log("4단계 원본: " + img.src);
img.src = "new-image.jpg";
console.log("5단계 변경: " + img.src);
```
HTML:
```html
```
원본 텍스트
```
정답: A
1. 단계별 실행 과정:
1) 1단계: `innerHTML` 속성으로 원본 내용 "원본 텍스트" 출력
2) 2단계: `innerHTML`을 "변경된 내용"으로 변경 후 출력
3) 3단계: `setAttribute()`로 class 속성을 "highlight"로 설정, `className`으로 확인
4) 4단계: img 요소의 원본 `src` 속성값 "original.jpg" 출력
5) 5단계: `src` 속성을 "new-image.jpg"로 변경 후 출력
2. 핵심 학습 포인트:
1) `innerHTML`: 요소의 내용을 실시간으로 변경 가능
2) `setAttribute()`: 모든 HTML 속성을 동적으로 설정 가능
3) `className`: 클래스 속성에 접근하는 DOM 속성
4) 속성 직접 접근: `img.src`처럼 속성에 직접 접근하여 변경 가능
5) DOM 변경사항은 즉시 브라우저에 반영됩니다
이는 JavaScript가 웹 페이지를 동적으로 만들 수 있는 핵심 기능들입니다.
💡 학습 팁
이 문제를 포함한 JavaScript 과목의 모든 문제를 순차적으로 풀어보세요. 진행상황이 자동으로 저장되어 언제든지 이어서 학습할 수 있습니다.