DOM은 Document Object Model의 약자로, HTML(Document)에 접근하여 Object(JavaScript Object)처럼 HTML을 조작(Manipulation)할 수 있는 Model이라는 의미를 가지고 있습니다. 즉, 자바스크립트를 사용하는 방법을 알고 있으면 DOM을 활용하여 HTML을 조작할 수 있다는 의미입니다.
DOM은 HTML의 아주 작은 부분까지 접근할 수 있도록 여러 뛰어난 웹 개발자들이 모여 철저히 분석하여 준비된 구조(Model; Structure)입니다. 자바스크립트는 이 구조를 잘 활용하여 HTML로 구성된 웹 페이지를 작동하게 만들 수 있습니다. 우리가 배웠던 반복문과 조건문, 배열, 객체를 활용하여 생성되는 트윗을 저장하고 분류하는 작업 또한 할 수 있습니다.
자바스크립트는 다양한 일을 할 수 있지만, 전통적으로 브라우저를 제어하기 위해서 오랜 기간동안 사용 되어왔기 때문에, 웹 개발에 가장 좋은 언어입니다. DOM을 공부하여 홈페이지를 조금 더 다이나믹하게 만들어 봅시다!
한번 아래 구조에 대해서 분석을 해봅시다. 아래와 같은 단순한 HTML이 있습니다.
body 엘리먼트의 자식 엘리먼트(element)는 총 몇 개인가요?
class의 이름이 news-contents 인 div 엘리먼트의 부모 엘리먼트는 무엇인가요?
id의 이름이 nav인 div엘리먼트 를 포함해서, 모든 자식 엘리먼트의 class 이름을 console.log를 사용하여 확인하려면 어떻게 해야 할지 수도코드(pseudocode)를 작성해주세요
<html>
<body>
<div id="nav">
<div class="logo"></div>
<div class="menu-wrapper">
<div class="menu"></div>
<div class="menu"></div>
<div class="menu"></div>
<div class="profile-photo"></div>
</div>
</div>
<div id="news-contents">
<div class="news-content-wrapper">
<div class="news-picture"></div>
<div class="news-title"></div>
<div class="news-description"></div>
</div>
</div>
<div id="footer"></div>
</body>
</html>
body 엘리먼트의 자식 엘리먼트는 총 3개입니다. id가 nav, news-contents, footer 인 3가지 엘리먼트입니다.
그림으로 표현하기는 쉽지만, 컴퓨터에게는 어떻게 인식시킬까요? 자바스크립트에서 DOM은 document 객체에 구현되어 있습니다. 브라우저에서 작동되는 자바스크립트 코드에서는 어디에서나 document 객체를 조회할 수 있습니다. 한번, body를 찾아보겠습니다.
밑으로 쭉 내려보면 children 속성을 찾을 수 있습니다. 신기하게도 children에 nav, news-contents, footer 가 자식으로 있는 것을 볼 수 있습니다. 물론 document.body.children 으로 조회할수도 있습니다.
