Javascript] DOM(Document Object Model)

### Document Object Model;문서객체모델

- W3C에서 정의

- Core(모든 문서), XML, HTML 표준모델이 존재

- HTML DOM : 웹 문서 로드 시, 브라우저는 구성요소를 객체화하여, 트리 구조의 DOM을 생성. HTML의 구성 요소들을 획득, 변경, 추가 삭제하기 위한 표준

## 문서 객체

- JavaScript에서 사용할 수 있는 객체로 만들어진 HTML 요소

- 정적 문서 객체 생성

웹 문서를 로드하며 HTML 문서 내의 구성요소 읽고 객체 생성

- 동적 문서 객체 생성

JavaScript로 HTML 문서에 없던 문서 객체 생성

* 요소 : HTML 문서에 작성한 요소

* 노드 : HTML 태그와 문자열이 객체화 된 것, 하나의 객체 그 상태, 하나의 텍스트 상자

* 문서객체 : HTML 문서를 브라우저에서 로드하며, 객체화시킨 HTML 요소들과 노드가 할당되어 JavaScript로 조작 가능한 변수

## document 객체

- HTML 문서와 관련

- window 객체 한 부분, window.document 속성을 통해 접근 / window 생략 가능

- JavaScript 코드나 HTML 표현을 작성

- 로드된 문서에 단 하나만 존재

- HTML 태그를 사용해 문자열의 형식 지정이 가능, 문서 객체 접근의 시발점

- write(), writeln() : JavaScript 코드, HTML 표현 작성, HTML 태그를 사용해 문자열 형식 지정 가능

## 속성에 값 할당

1. 요소 노드(createElement() 메서드) 이용해 객체 생성

2. 문서 객체의 속서엥 값 할당

3. 요소 노드를 body 문서 객체에 연결

- 웹 표준이 정의하거나 브라우저가 지원하는 태그의 속성에서만 사용 가능함

## 속성 메서드 이용

1. 요소 노드(문서 객체) 생성

2. setAttribute(attribute, value)메서드를 이용해 문서 객체의 속성 지정

3. 요소 노드를 body 문서 객체에 연결

- 브라우저에서 지원하지 않는 속성 지정 가능

- setAttribute() : 문서 객체의 속성 지정

- getAttribute() : 객체의 속성을 가져옴

## innerHTML 속성

- 요소의 내부

# body 객체의 innerHTML 속성

- HTML 코드를 문자열 형태로 입력 시 문서 객체 생성

- 문서 객체의 innerHTML 속성 이용해 문서 객체의 수정이나 삭제 가능

- 문서 객체에 내용을 추가할 경우, 복합대입연산자 이용

# textContent

- HTML 태그를 문자로 처리하는 속성

- IE 7 이하에서는 지원 않음