HTML2 DOM Document Object Model은 HTML 문서의 계층적 구조와 정보를 표현하며 이를 제어할 수 있는 API, 즉 프로퍼티와 메서드를 제공하는 트리 자료구조 이다. HTML 문서의 계층적 구조와 정보를 표현하는 것은 물론 노드 객체의 종류에 따라 필요한 기능을 프로퍼티와 메서드의 집합인 DOM API 로 제공한다. 요소취득 document.getElementById( 'id' ) : 인수로 전달한 id 값을 갖는 하나의 요소 노드를 탐색하여 반환 document.getElementsByTagName( 'div' ) : 인수로 전달한 태그 이름을 갖는 모든 요소 노드들을 탐색하여 반환한다. 반환값은 여러개의 노드 객체를 갖는 DOM 컬렉션 객체인 HTMLCollection 객체를 반환한다. HTML.. 2020. 11. 25. 브라우저의 렌더링 HTML 파싱과 DOM 생성 브라우저의 요청에 의해 서버가 응답한 HTML 문서는 문자열로 이루어진 순수 텍스트다. 순수 텍스트인 HTML 문서를 브라우저에 시각적인 픽셀로 렌더링하려면 HTML 문서를 브라우저가 이해할 수 있는 자료구조로 변환하여 메모리에 저장해야 한다. 브라우저의 렌더링 엔진은 다음 그림과 같은 과정을 통해 응답받은 HTML 문서를 파싱하여 브라우저가 이해할 수 있는 자료구조인 DOM (Document Object Model)을 생성한다. CSS 파싱과 CSSOM 생성 렌더링 엔진은 HTML을 처음부터 한 줄씩 순차적으로 파싱하여 DOM을 생성해나가는데 그 과정에 CSS를 로드하는 link 태그나 style 태그를 만나면 DOM 생성을 일시 중단한다. 그리고 link 태그의 href .. 2020. 11. 25. 이전 1 다음