STS 123::자바스크립트 기초

3. 문서 객체 모델


JavaScript에서 사용하는 문서객체 모델(DOM)이 무엇이며, 어떻게 사용하고, 어느 때에 어떤 메서드를 사용하는지에 대해 알아봅니다.

이 강의를 통해 자바스크립트에서 DOM을 이용해 HTML 문서의 콘텐츠를 동적으로 핸들링 할 수 있습니다.


01: DOM의 개념

JavaScript는 DOM을 이용하여 HTML의 요소, 속성, 스타일 등을 변경할 수 있습니다.

js_3-1

동영상 강좌

참고자료

퀴즈

1) DOM은 왜 사용하는가?

해답보기

HTML의 요소, 속성, 스타일 등을 변경할 수 있습니다.


2. document 객체

document객체는 웹 페이지를 의미합니다. 웹페이지에 존재하는 HTML요소에 접근할 때는 반드시 document객체부터 시작해야 합니다.

1) Document 메소드

2) DOM 요소의 변경

Hello World!

This example demonstrates the getElementById method!


##### 실행 결과
<p id="intro">Hello World!</p>
<p>This example demonstrates the <b>getElementById</b> method!</p>
<p id="demo"></p>             
<script>
  var myElement = document.getElementById("intro");
  document.getElementById("demo").innerHTML = "The text from the intro paragraph is " + myElement.innerHTML;
</script>


### 동영상 강좌
- DOM 객체 : [https://bit.ly/2LYf169](https://bit.ly/2LYf169){:target="_blank"} `10:33`
- DOCUMENT 객체 : [https://bit.ly/2vGRQCA](https://bit.ly/2vGRQCA){:target="_blank"} `07:52`
- 자바스크립트(javascript)와 DOM 프로그래밍 : [https://bit.ly/2nk8nJ0](https://bit.ly/2nk8nJ0){:target="_blank"} `07:48`
- DOM 메소드와 속성 : [https://bit.ly/2vpvrdH](https://bit.ly/2vpvrdH){:target="_blank"} `12:11`


### 참고자료
- DOM 메소드 : [https://bit.ly/2qW7t9n](https://bit.ly/2qW7t9n){:target="_blank"} 
- DOM 요소 : [https://bit.ly/2OjjRHR](https://bit.ly/2OjjRHR){:target="_blank"} 


### 퀴즈
#### 1) document 메소드를 이용하여 HTML 클래스이름이 “happy”에 속한 요소들을 모두 선택하시오.
<details>
<summary>해답보기</summary>
<p></p>
<div markdown="1">

```javascript
document.getElementsByClassName("happy")

</div> </details>

2) HTML 요소의 내용을 바꾸는 가장 쉬운 방법은 무엇인가?

해답보기

innerHTML 메소드를 사용하여 바꾼다.

str.innerHTML="changed text";

03: 실습 예제

기본 실습은 통합실습페이지에서 한꺼번에 다루고 있습니다. 아래의 링크를 클릭하면 새창(탭)이 열리고 해당 예제로 이동하게 됩니다.

04: 참고 자료