공부하기 전에 DOM을 들으면 내가 떠올리는 건
이것밖에 안 떠올랐다.
1. DOM을 알아보기 전에
'렌더링'이라는 것을 알고 있으면 DOM을 이해하는 데 수월하다.
영상을 만들던 나에게 익숙한 단어였던 렌더링, 개발에선 어떨까?
웹브라우저는 HTML 문서를 파싱( =해석)하고
화면에 해석된 문서 결과를 보여준다.
해석한 HTML 코드를 화면에 보여주는 과정을 '렌더링'이라고 한다.
1-1 렌더링 과정.
브라우저는 HTML 코드를 해석해서 body태그나 div태그와 같은 요소들을
트리 형태로 구조화해 표현하는 문서( =객체)를 생성한다.
바로 이것을 DOM이라 하며, 브라우저는 DOM을 통해
화면에 웹 콘텐츠( =텍스트, 이미지, 사운드 등)를 렌더링한다.
2. DOM의 존재 목적
HTML 코드에 써져있는 대로 결과를 출력하는 게 브라우저의 역할인데
왜 굳이 중간에 DOM이라고 하는 데이터를 생성하느냐?
그것은 바로 JS를 사용해서 DOM 문서에 스크립트를 작성할 수 있게
해주는 것이 목적이기 때문이다.
DOM은 JS를 사용해서 웹 콘텐츠를 추가, 수정, 삭제하거나
마우스 클릭, 키보드 타이핑 등 이벤트에 대한 처리를 정의할 수 있도록
제공되는 프로그래밍 인터페이스이다.
JS가 웹 문서에 대한 어떤 동작을 구현하고 나면
DOM에 결과가 반영되고 그 결과를 토대로, 웹브라우저 화면이
다시 렌더링되는 흐름을 가진다.
HTML 코드는 정적인 텍스트라서 웹 화면이 사용자와 동적인
상호작용을 하기 위해서는 DOM이 그 역할을 해줄 있다.
한 줄 요약 : DOM이 사용자와 실질적인 상호작용을 해준다. 그 말이다.
* 이해가 안 되는 초심자를 위한 정리 (나 포함)
- DOM을 HTML의 복사본이라고 생각해라.
대신 정적인 HTML과 다르게 DOM은 동적이다 라고만 알고 있자.
- JS에서 코드를 작성해 내리는 명령이 바로
HTML에 전달되는 것이 아니다.
HTML의 복사본인 DOM에 JS의 명령이 전달되는 거다.
'Why' better than 'Yes'