What is the DOM?
DOM은 Document Object Model의 약자로, HTML(Document)에 접근하여 Object(JavaScript Object)처럼 HTML을 조작(Manipulation)할 수 있는 Model이라는 의미를 가지고 있습니다. 즉, 여러분이 자바스크립트를 사용하는 방법을 알고 있으면 DOM을 활용하여 HTML을 조작할 수 있다는 의미입니다.
HTML을 조작할 수 있다는게 무슨 의미일까요? DOM은 HTML의 아주 작은 부분까지 접근할 수 있도록 여러 뛰어난 웹 개발자들이 모여 철저히 분석하여 준비된 구조(Model; Structure)입니다. 자바스크립트는 이 구조를 잘 활용하여 HTML로 구성된 웹 페이지를 작동하게 만들 수 있습니다. 우리가 배웠던 반복문과 조건문, 배열, 객체를 활용하여 생성되는 트윗을 저장하고 분류하는 작업 또한 할 수 있습니다.
자바스크립트는 다양한 일을 할 수 있지만, 전통적으로 브라우저를 제어하기 위해서 오랜 기간동안 사용 되어왔기 때문에, 웹 개발에 가장 좋은 언어입니다.
HTML이 JavaScript에서는 어떻게 표현될까?
한번 아래 구조에 대해서 분석을 해봅시다. 아래와 같은 단순한 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>Q1 - 자식 엘리먼트 찾기
-
body 엘리먼트의 자식 엘리먼트는 총 3개입니다. id가 nav, news-contents, footer 인 3가지 엘리먼트입니다.
그림으로 표현하기는 쉽지만, 컴퓨터에게는 어떻게 인식시킬까요? 자바스크립트에서 DOM은 document 객체에 구현되어 있습니다. 브라우저에서 작동되는 자바스크립트 코드에서는 어디에서나 document 객체를 조회할 수 있습니다. 한번, body를 찾아보겠습니다.
밑으로 쭉 내려보면 children 속성을 찾을 수 있습니다. 신기하게도 children에 nav, news-contents, footer 가 자식으로 있는 것을 볼 수 있습니다. 물론 document.body.children 으로 조회할수도 있습니다.
Q2 - 부모 엘리먼트 찾기
news-contents 는 body 의 자식 엘리먼트입니다. 그렇다면, 큰 고민 없이 우리는 body가 news-contents 엘리먼트의 부모 엘리먼트라는 것을 알 수 있습니다. 자바스크립트에서도 확인해봅시다. news-contents 를 조회하려면, document.body.children 의 첫 번째 엘리먼트를 조회해야 합니다.
매번 document.body 로부터 찾아가는 것은 정말 번거로운 일입니다. 따로 변수 선언을 해서 이 정보를 저장해둡시다. 변수 newsContents 를 따로 선언하여 우리가 찾은 news-contents 엘리먼트를 할당합시다.
newsContents의 부모 엘리먼트를 가리키고 있는 속성을 찾아봅시다.
Q3 - DOM 순회하기
DOM 구조의 특성을 한번 되돌아보면, 뭔가 이런 조직도가 생각나지 않으시나요? body가 가장 상위에 있고, 아래에 여러 구성요소가 부모-자식 관계를 가지고 있는 것을 그려보면 아래와 비슷한 구조가 만들어집니다.
이런 자료 구조를 컴퓨터 공학에서는 트리 구조라고 합니다. 가장 큰 특징은, 부모가 자식을 여러개 가지고, 부모가 하나인 구조가 계속 반복된다는 점입니다. 즉, 부모가 가진 하나, 혹은 여러개의 자식 엘리먼트를 조회하는 코드를 계속 반복해서 실행하게 될 것입니다.
function consoleLogAllElement(element){
// nav의 class 이름을 console.log 합니다.
// nav의 자식 엘리먼트가 있는지 검색합니다. (logo, menu-wrapper)
//logo의 class 이름을 console.log 합니다.
//logo의 자식 엘리먼트가 있는지 검색합니다. (없음)
//menu-wrapper의 class 이름을 console.log 합니다.
//menu-wrapper의 자식 엘리먼트가 있는지 검색합니다. (menu, menu, menu, profile-photo)
//첫 번째 menu의 class 이름을 console.log 합니다.
//첫 번째 menu의 자식 엘리먼트가 있는지 검색합니다. (없음)
//두 번째 menu의 class 이름을 console.log 합니다.
//두 번째 menu의 자식 엘리먼트가 있는지 검색합니다. (없음)
//세 번째 menu의 class 이름을 console.log 합니다.
//세 번째 menu의 자식 엘리먼트가 있는지 검색합니다. (없음)
//profile-photo의 class 이름을 console.log 합니다.
//profile-photo의 자식 엘리먼트가 있는지 검색합니다 (없음)
//자식 엘리먼트를 모두 탐색했음으로, 함수 실행이 종료됩니다.
//자식 엘리먼트를 모두 탐색했음으로, 함수 실행이 종료됩니다.
}