Dev Blog

브라우저의 렌더링 엔진은 HTML 문서를 파싱하여 브라우저가 이해할 수 있는 자료구조인 DOM을 생성한다. DOM_Document Object Model 은 HTML 문서의 계층적 구조와 정보를 표현하며 이를 제어할 수 있는 API, 즉 프로퍼티와 메서드를 제공하는 트리 자료구조다. 39.1 노드 39.1.1 HTML 요소와 노드 객체 HTML 요소는 렌더링 엔진에 의해 파싱되어 DOM을 구성하는 요소 노드 객체로 변환된다. 이때 HTML 요소의 어트리뷰트는 어트리뷰트 노드로, HTML 요소의 텍스트 콘텐츠는 텍스트 노드로 변환된다. HTML 문서는 HTML 요소들의 집합으로 이뤄지며, HTML 요소는 중첩 관계를 갖는다. 즉, HTML 요소의 콘텐츠 영역(시작 태그와 종료 태그 사이)에는 텍스트뿐만 아..

DOM 트리의 순회는 트리 자료구조의 순회 방법을 따른다. 트리구조 역시 자료를 효율적으로 탐색하고, 삽입이나 삭제할 수 있는 구조로 저장하는 것을 목적으로 하는 자료구조이기 때문에 효율적인 탐색 방법이 존재한다. 트리를 효율적으로 탐색하기 위해서는 타깃 노드에 도달할 때까지 최소한의 노드들을 거쳐가야 한다. 즉, 중복으로 방문하는 노드가 없어야 하는데 이를 위해 트리를 탐색하는 과정엔 방문한 노드를 기록하는 것도 포함되어 있다. 트리 자료구조의 노드를 탐색하여, 원하는 타깃을 찾아내는 방법에는 깊이 우선 탐색과 너비 우선 탐색이 있다. 깊이 우선 탐색 방법은 루트 노드로부터 계속해서 자식 노드로 내려가며 탐색하다가 마지막 자식 노드에 도달했을 때, 만약 아직 타깃을 찾지 못했다면 다시 부모 노드로 올라..