DOM이란?
DOM은 Document Object Model의 약자로 HTML 요소를 Object(JavaScript Object)처럼 조작(Manipulation)할 수 있는 Model이다. 즉, 우리가 자바스크립트를 사용할 수 있으면 DOM으로 HTML을 조작할 수 있다.
HTML에 JavaScript를 적용하기 위해서는 <script> 태그를 이용한다.
<script src="myScriptFile.js"></script>[코드] HTML 문서에 포함되는 script 요소
웹 브라우저가 작성된 코드를 해석하는 과정에서 <script> 요소를 만나면 웹 브라우저는 HTML 해석을 잠시 멈춘다.
HTML 해석을 잠시 멈춘 웹 브라우저는 <script> 요소를 먼저 실행한다. <script> 요소는 등장과 함께 실행된다는 사실을 꼭 기억하자.
<script> 태그를 추가하는 방법은 두 가지 대표적인 사례가 존재하는데, <head> 태그에 추가하는 방법과 다른 하나는 </body>가 끝나기 전에 추가하는 방법이다.
HTML이 JavaScript에서는 어떻게 표현될까?
다음 HTML 문서를 보면서 아래의 질문을 해결할 방법을 고민해보자.
<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 엘리먼트의 자식 엘리먼트(element)는 총 몇 개일까?
body 엘리먼트의 자식 엘리먼트는 총 3개이다. id가 nav, news-contents, footer 인 3가지 엘리먼트이다.
DOM 구조를 조회할 때에는 console.dir 이 유용하다. console.dir 은 console.log 와 달리 DOM을 객체의 모습으로 출력한다.
console.dir(document.body) 를 통해 출력된 객체에서 childredn 속성을 찾을 수 있다. children 속성에 nav, news-contents, footer 가 자식으로 있는 것을 확인할 수 있다. 물론 document.body.children 으로 바로 조회할 수도 있다.
class의 이름이 news-contents 인 div 엘리먼트의 부모 엘리먼트는 무엇일까?
id가 news-contents 인 div 엘리먼트는 body 엘리먼트의 자식 엘리먼트이다. 반대로 body 엘리먼트는 id가 news-contents 인 div 엘리먼트의 부모 엘리먼트이다. id가 news-contents 인 엘리먼트를 조회하려면 document.body.children 의 첫 번째 엘리먼트를 조회하면 된다. document.body 의 children을 조회할 때마다 매번 document.body 로부터 찾아가는 일은 정말 번거롭다. 따로 변수 선언을 해서 이 정보를 저장해두면 주소를 참조하기 때문에 언제든지 접근할 수 있다. 변수 newsContents 를 따로 선언하여 id가 news-contents 인 엘리먼트를 할당해보자.
let newsContents = document.body.children[1]
//undefined console.dir(newsContents)
//div#news-contents[코드] body 엘리먼트의 자식요소를 변수에 할당한다.
id의 이름이 nav인 div엘리먼트 를 포함해서, 모든 자식 엘리먼트의 class 이름을 console.log를 사용하여 확인하는 방법을 수도코드(pseudocode)로 작성해보자.
DOM 구조는 회사의 조직도와 유사한 모습이다. body가 가장 상위에 있고 아래에 여러 구셩오소가 부모-자식 관계를 가지고 있다.
[그림] DOM의 관계도
이런 자료구조를 컴퓨터 공학에서는 트리구조라고 한다.
트리구조의 가장 큰 특징은 부모가 자식을 여러개 가지고 부모가 하나인 구조가 반복되는 점이다. 즉 부모가 가진 하나 또는 여러 개의 자시 엘리먼트를 조회하는 코드를 작성한다면 여러 번 반복해서 실행하는 코드가 필요하다.
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의 자식 엘리먼트가 있는지 검색합니다 (없음)
//자식 엘리먼트를 모두 탐색했음으로, 함수 실행이 종료됩니다.
//자식 엘리먼트를 모두 탐색했음으로, 함수 실행이 종료됩니다.
}[코드] 엘리먼트를 조회하는 코드를 작성하기 위한 수도코드
'My Wiki (CodesStates) > DOM' 카테고리의 다른 글
| (1-2) DOM으로 HTML 조작하기 (0) | 2021.08.05 |
|---|
댓글