JS] DOM(Document Object Model)

Dominating the DOM to add functionality to HTML elements

DOM 쓰는 이유

지금까지 우리는 html, css로 static한 웹사이트를 배웠다. 

static한 웹사이트는 화면에 보여주는 일만 하는 것을 말한다. 

html, css를 로드하고 저장해서 브라우저를 리프레쉬하면 웹사이트가 보인다.

 

여기서 우리가 인터렉티브한 웹사이트를 만들고자 한다면 

유저가 버튼을 눌렀을 때 웹사이트 일부를 그 때 그 때 변경해야 할 것이다.

우리는 그에 맞는 컨텐츠와 웹사이트의 디자인을 바꿔서 반응을 해주어야 한다.

웹사이트가 인터넷 상에서 라이브로 반응해줘야하는데

우리는 유저가 요청할 때마다 html, css 코드를 업데이트하고

웹페이지를 다시 로드해야하는 일을 수작업으로 매 번 실행해 줄수는 없다. 

유저가 2명만 되어도 이 웹사이트는 우리에게 고통이 될 것이다.

 

이 문제를 Document Object Model(DOM)이 해결할 수 있다. 

우리가 선택하고 조종할 수 있게

웹페이지를 개별 object로 목록화(catalog)하여

만약 유저가 버튼을 눌렀을 때 해당 부분한 선택하여 웹사이트 일부를 변경할 수 있다. 

 

DOM 구조 

우리가 웹페이지를 로드업 할 때

브라우저는 자동으로 html 파일을 DOM으로 변환시킨다. 

각 element와 연관된 데이터를 tree structure로 정리한다.

 

tree structure는 선택하고 조종할 수 있는 object들이 모인 것이다. 

각 하나하나가 object 이다.

html DOM

 

 

 

---

HTML tree structure 보는 법

HTML tree visualizer Chrome plugin을 설치한 후 

만든 페이지를 tree visualizer로 보면 

html은  head, body 이렇게 2개의 children이 있다. 

body는 h1, input, button, ul, script로 5 children이 있다. 

 

 

 

---

 

DOM에서 object 선택하기

DOM을 사용해서 원하는 object를

선택한후 조종할 수 있다고 했다.

 

그럼 일단 선택하는 법을 살펴보자.

선택하는 방법은 여러 가지가 있다. 

여기서는 간단히 보고

html element를 선택하는 것은 뒤에서 더 다루겠다.

 

자바스크립트 DOM을 이용해서

이 tree 안을 보는 방법이다.

콘솔에서 document;를 입력하면 

document 안에 든 오브젝트들이 쭉 나온다. 

 

 

 

document의 바로 아랫 단계가 무엇이 있는지 보자.

document.firstElementChild로 물어본다.

html이 나온다.

 

document의 아래의 아래 단계엔 무엇이 있는지 본다.

document.firstElementChild.firstElementChild

document.firstElementChild.lastElementChild

 

 

---

 

DOM에서 object 선택하여 조종하기 

 

바꿀수 있는 내용이 무지 많다.

연습삼아 몇 개 조종해보자. 

 

h1을 찾은 후 var heading에  object를 저장한 후 

1) h1을 Good Bye로 내용을 바꿔본다.

글자 변경

 

 

2) 글자색 변경해보기

글자색 변경

 

 

3) 바로 input을 찾아서 체크 박스에 체크하기 

action이라서 method이다. 그래서 click( )에 괄호가 들어간다.

체크가 됨