DOM

최경락 (K_ROCK_)·2021년 11월 26일

JavaScript TIL

DOM 이란?

DOM은 Document Object Model 의 단축어로, HTML 문서의 구조가 정리된 객체라고 할 수 있겠다.
DOM 은 JS에 포함된 것이 아닌, 웹을 구축하는데 사용되는 API 라는 점에서 JS와는 다른 개념임을 알 수 있다.
(WEB API에 DOM 과 BOM이 포함되어 있다.)

노드?

노드란 DOM 에 포함된 세부 정보들을 지칭하는 말이다.
요소노드, 속성노드, 텍스트노드, 주석노드 등 HTML 문서에 있는 정보들을 더 세분화한 정보라고 생각 할 수 있다.
→ 우리는 보통 HTML 내부에서 단위를 element 로 나누지만, element가 element_node에 포함되어 있는 것으로 보아 노드가 더 세분화 되어 있다고 생각해 볼 수 있다.
요소노드에는 우리가 익히 아는 <body>, <div>, <span>, <input> 등이 속해있다.
속성노드에는 class="", id="", type="" 등이 속해있다.

노드는 문서에 포함된 구조를 정리한 것, 요소들은 문서를 구성하는 것 이라고 나눠 볼 수도 있겠다.
아직은 이해가 어려워서 여기까지만...

HTML에 JS 적용시키기

script 태그를 이용한다.
HTML 을 읽다가 script 를 발견하면 HTML을 읽는 것(parsing) 을 중지하고, JS 를 읽는다.
→ JS 는 등장과 함께 실행된다.

작성 위치에 따른 차이

HTML 문서는 위에서 아래로 읽히게 되고, JS 파일은 등장과 동시에 읽힌다.
여기서 알 수 있는 점은, 만약 JS에서 자신보다 늦게 읽히는 HTML 의 요소를 사용해야할 경우, 해당 요소를 찾지 못해 원하는 동작을 할 수 없게된다.

//JS

console.log(document.querySelector('#this').textContent)

<!--HTML-->

<script> <!--이 위치에선 읽지 못한다.-->

<div id="this">hello world</div>

<script> <!--'hello world', 위의 내용이 불러와졌으므로 해당 내용을 가져 올 수 있다.-->

브라우저가 JS를 읽는 방법

브라우저가 JS 를 다운받는 것을 fetching, 실행하는 것을 executing 이라고 한다.
JS 를 script 태그로 불러 올 때 기본, async, defer 키워드로 JS를 불러오고 실행하는 방식을 결정 할 수 있다.
브라우저가 HTML 파일을 읽는 과정을 파싱(parsing)이라고 한다.
기본
- HTML 문서와 JS를 불러오는 것이 동시에 이루어지지 않는다.
- JS를 만나면 HTML 을 파싱하는 것을 멈추고 JS를 로드하고, 실행 한 뒤 다시 HTML 을 파싱한다.
async
- HTML을 불러오면서 JS를 백그라운드에서 동시에 불러온다.
- 만약 JS의 로드가 끝나면, HTML 파싱을 중지하고 실행시킨 뒤 다시 파싱을 진행한다.
- DOM 요소를 사용하지 않아 순서가 상관없는 JS 를 사용하는 경우 사용 할 수 있다.
defer
- HTML을 불러오면서 JS를 백그라운드에서 동시에 불러온다.
- JS의 로드가 끝나도, HTML 파싱을 중지하지 않고, HTML 의 파싱이 끝난 뒤에 JS를 실행시킨다.
- DOM 요소를 사용하여 순서가 필요한 경우 사용 할 수 있다.

DOM 의 구조 살펴보기

자식 엘리먼트 찾기

console.dir 을 사용하면 선택한 요소에 속한 정보들을 객체로 표시한다.
표시된 내부에서 children 이라는 프로퍼티는 가지고 있는 자식 엘리먼트들의 정보를 가지고 있는데 이를 확인하여 자식 엘리먼트들을 확인 할 수 있다.
이를 바로 확인하고 싶다면, 확인하려는 요소.children 으로 바로 확인 할 수도 있다.
→ 객체의 Dot Notation

<!--HTML-->

<body>
  <div class="first">
    <div></div>
    <div></div>
    <div></div>
  </div>
  <div class="second">
    <div></div>
    <div></div>
    <div></div>
  </div>
</body>

document.body.children // [div.first, div.second, script]

let second = document.querySelector('.second')

second.children// [div, div, div]

각각의 요소들이 해당 프로퍼티를 가지고 있기 때문에 확인 할 수 있다.

부모 엘리먼트 찾기

부모 엘리먼트를 찾는 것은 자식 엘리먼트를 찾는 것과 마찬가지로, console.dir 로 확인해 보았을 때, 자식은 children 에 저장이 되어있다면, 부모 엘리먼트에 대한 정보는 parentElement 프로퍼티에 저장 되어있다.
그러므로, 원하는 요소의 부모요소를 확인하기 위해서는 확인하려는 요소.parentElement 로 바로 확인 할 수도 있다.