[Study] DOM과 BOM

DOM(Document Object Model)

• HTML 문서에 대한 인터페이스
  HTML 문서를 해석하고 node와 property와 method를 객체화한 형태로 만든다. 이 객체화한 형태가 되어야 우리가 자바스크립트를 이용해 문서 구조, 스타일 내용 등을 조작할 수 있게 된다.
  
  

• DOM의 개체 구조는 노드 트리로 표현한다.
  노드는 요소, 속성, 텍스트 등 문서의 각 부분을 의미한다.
  노드 유형

1. 요소 노드(Element Node): (Ex. <div>, <p>, <a> 등) 자식 노드를 가질 수 있다.
2. 텍스트 노드(Text Node): 텍스트 내용을 낸다. 자식 노드를 가질 수 없다.
3. 속성 노드(Attribute Node): 요소의 속성(Ex. class, id, src 등)

• DOM의 최상위 노드 document

1. document 객체는 웹 페이지 자체를 의미한다. 또한 DOM Tree의 최상위 노드이자 진입점이다.
2. window 객체 하위에 위치한다.

- 항상 유효한 HTML 형식 작성된 HTML 문서가 유효하지 않는 경우 (Ex. head와 body 태그가 없는 경우) DOM 트리가 생성되며 올바르게 교정되어 생성된다.

정리

1. 그냥 문자열일 뿐인 HTML 문서를 브라우저에서 CRP(Critical Render Path)라는 렌더링 엔진이 문서를 읽어들여 파싱하고 HTML 태그들을 노드로 변환한다.
2. 노드의 형태에서는 프로그래밍 언어(JS)로 접근해 동적인 조작이 가능해진다.

DOM과 HTML 문서의 차이점 - DOM은 HTML의 내용과 구조가 객체 모델로 변환된 형태 - HTML은 단순 텍스트로 구성된 문서
자바스크립트에 의해 DOM을 수정할 경우 DOM은 업데이트되지만, ⭐️HTML 문서 내용 자체는 바뀌지 않는다!!⭐️

BOM(Browser Object Model)

• 브라우저와 관련된 객체의 집합
  웹 브라우저를 자바스크립트로 제어하기 위해 객체화한 모델이다.

• window라는 최상위 객체가 존재한다.
  window 객체 속성 중 하나로 위에서 설명한 DOM의 최상위 노드 document가 포함되어 있다.
  즉, 브라우저 안에 웹 페이지(DOM)가 존재하기 때문에 BOM이 DOM을 포함하고 있다는 사실을 알 수 있다.(접근도 가능하다.)

• 브라우저 관련된 기능을 제어할 수 있다. (Ex. 창과 탭, URL, 쿠키, 히스토리, 스크린)
  개발자 도구의 콘솔에서 window.location.relad()를 입력하면 브라우저가 새로고침 되는 것도 객체화된 브라우저(BOM) 덕분에 자바스크립트 코드로 접근이 가능한 것이다.
  이 외에도 window.history.back()과 같이 세션 히스토리에 접근해 뒤로 가기/앞으로 가기와 같은 동작도 제어가 가능하다.

후기

웹 페이지를 조작할 때 JS로 조작한다는 것은 널리 알려진 사실이지만 DOM과 BOM에 의해 조작이 가능해진다는 부분을 놓치기 쉬운 것 같다. JS로 조작하는 것은 HTML 문서가 객체화된 DOM이라는 것이고 DOM을 수정할 경우 DOM은 변하지만 HTML 문서 자체는 바뀌지 않는다는 것이 중요한 포인트다.

DOM은 브라우저에서 렌더링 엔진에 의해서 생성되기 때문에 브라우저에 의존적이라는 생각을 하게 되었는데, 물론 웹 페이지의 경우는 브라우저가 있어야만 우리가 확인이 가능하지만, 언젠가는 브라우저 없이 웹페이지를 사용하는 날이 올까..? 🤔

DOM에서 많은 업데이트가 발생하면 브라우저가 각 변경 사항이 발생할 때마다 레이아웃을 다시 계산하고 그리기 때문에 성능의 문제가 발생하게 된다. 우리가 많이들 사용하는 React는 Virtual DOM을 사용해 DOM의 복사본을 사용하게 되는데, 이 부분은 다음에 따로 정리하도록 하겠다.

참고

DOM의 개념