자바스크립트 : DOM

DOM 모델은 HTML 웹페이지를 하나의 Object로 설정하고 내부의 구조를 순서대로 분류한 것으로, 브라우저가 자바스크립트와 같은 스크립트 언어를 통해 웹페이지 내부 요소를 보다 쉽게 변경, 삭제, 생성할 수 있게 돕는다. 

 

DOM 구조에서 Nodes들은 HTML 웹페이지 문서의 태그 요소들을 말하며, Element는 해당 노드 내부의 내용을 지칭한다.

 

1. document 키워드는 자바스크립트가 DOM의 root에 접근할 수 있게 한다.

2. querySelector()를 통해 문서 내의 특정 요소를 css 태그별로 접근할 수 있다.

3. 웹페이지 요소의 ID로 직접 접근하기 위해서는 .getElementById를 사용한다.

4. 웹페이지 요소 내부의 내용에 접근하기 위해서는 .innerHTML을 사용한다.

5. createElement(), appendChild(), removeChild() 메소드를 통해 요소를 생성, 붙이기, 삭제할 수 있다.

6. .onclick 메소드를 통해 특정 요소를 클릭했을 시 수행하는 행동을 정의할 수 있다.