12-2장 문서 객체 모델과 이벤트 다루기

공부할 내용 (456~486쪽)

 

1. 문서 객체 모델이해하기

웹 브라우저는 HTML 문서의 구성 요소를 모두 객체로 인식한다.

 

- 문서 객체 모델이 생성되는 방식

문서 객체 모델은 웹 브라우저가 HTML 문서를 해석하고 해석한 HTML 문서 구조를

객체로 변환하는 방식으로 생성된다.

 

2. 노드 선택하기

자바스크립트로 웹 브라우저에 표시되는 HTML 문서를 조작하려면 문서 객체 모델을 조작해야 한다.

문서 객체 모델은 WINDOW 객체의 DOCUMENT 객체를 사용해 조작할 수 있다.

 

- 속성으로 노드 선택 (예시들)

parentNode - 부모노드를 반환한다.

childNodes - 모든 자식 노드를 반환한다.

parentElement - 부모 요소 노드를 반환한다.

childeren - 자식 요소 노드를 반환한다.

 

- get 메서드 사용하기

getElementById(<id 속성값>) - id 속성값과 일치하는 요소 노드 1개 선택한다.

getElementsByClassName(<class 속성값>) - class 속성과 일치하는 요소 노드를 모두 선택한다.

getElementsByTagName(<태그명>) - 태그명과 일치하는 요소 노드를 모두 선택한다.

 

- query 메서드 사용하기

querySeletor(<CSS 선택자>) - 매개변수로 넘어오는 CSS 선택자에 해당하는 노드를 1개 선택한다.

querySelectorAll(<CSS 선택자>) - 매개변수로 넘어오는 CSS 선택자에 해당하는 노드를 모두 선택한다.

 

3.노드 조작하기

선택한 노드의 타입이 요소 노드라면 정의된 속성을 사용해 콘텐츠를 조작할 수 있다.

 

textContent - 요소 노드의 모든 텍스트에 접근한다.

innerText - 요소 노드의 텍스트 중 웹브라우저에 표시되는 텍스트에만 접근한다.

innerHTML -  요소 노드의 텍스트 중 HTML 태그를 포함한 텍스트에만 접근한다.

 

<노드>.getAtrribute("속성명");  - 속성값을 가져온다.

<노드>.setAttribute("속성명","속성값"); - 속성값을 설정한다.

 

 

4.노드 추가/삭제하기

 

- 노드 추가하기

createElement() - 요소노드를 생성한다.

createTextNode() - 텍스트 노드를 생성한다.

createAttribute() - 속성노드를 생성한다.

 

 - 노드 삭제하기

<부모노드>.removeChild(<자식 노드>)