<모던자바스크립트 39장 DOM> TIL-50

  오늘은 DOM에 대해서 공부했다. DOM은 결국 HTML을 파싱하여 생성된 결과물이다. DOM은 노드들로 구성되며, 이 노드들은 서로 중첩적인 관계를 지니고 있다. 또 DOM은 계층적인 구조를 가지고 있는데 최상위 계층에 있는 노드가 바로 루트 노드이다. 부모 노드가 없는 노드이며, 그 아래 요소 노드와 요소 노드의 자식 노드인 텍스트 노드가 있고, 요소 노드와 형제 노드는 아니지만 연결되어 있는 어트리뷰트 노드가 있다. DOM은 결국 CSSOM의 필요한 노드들과 결합하여 렌더 트리를 만들고 레이 아웃되어 페인팅되서 시각적으로 표현된다.  또 DOM은 API 즉, 프로퍼티와 메서드를 제공하여 DOM의 노드들을 컨트롤할 수 있는 기능을 제공한다. 이러한 DOM은 렌더링 엔진에 의해서 만들어진다. 프로그래밍을 공부하기 이전에는 모든게 굉장히 단순하다라고 느꼈었다. 조금 창피한 이야기이지만, 어플들을 사용할때 조그마한 핸드폰안의 화면에 많은 글들이 내 눈에 직접 보이지 않는 다는 이유로, 내부 구조도 굉장히 단순하게 되어있을것이라고 생각한적이 있었다. 하지만 지금 프로그래밍을 공부하는 입장에서는 보았을때 정말 복잡한 구조로 되어있고, 또 수 많은 기능들은 하나 하나 전부 존재 이유가 명확하다라는것을 점점 더 깨닫게 되는것 같다. 사설이 조금 길었지만, 결국 이번장에 개발자로서 가장 중요한 것은 DOM은 HTML 문서의 계층적 구조와 정보를 표현하는 것은 물론 노드 객체의 종류, 즉 노드 타입에 따라 필요한 기능을 프로퍼티와 메서드의 집합인 DOM API로 제공한다는 것이 아닐까 싶다. 결국 개발자가 잘 알아야 하는것은 DOM API 즉, DOM이 제공하는 프로퍼티와 메서드를 사용하여 노드에 접근하고 HTML의 구조나 내용 또는 스타일 등을 동적으로 변경하는 방법을 익히는 것이니까 말이다.

 

2022.07.28 - [언어 공부 및 정리/자바스크립트[모던자바스크립트]] - 39장 DOM(노드들로 구성된 트리 자료구조)

39장 DOM(노드들로 구성된 트리 자료구조)