dom4 [ 모던 자바스크립트 스터디 ] DOM 브라우저의 렌더링 엔진은 HTML 문서를 파싱하여 브라우저가 이해할 수 있는 자료구조인 DOM을 생성한다. DOM은 HTML 문서의 계층적 구조와 정보를 표현하며 이를 제어할 수 있는 API, 즉 프로퍼티와 메서드를 제공하는 트리 자료구조다. 노드 HTML 요소와 노드 객체 HTML 요소는 HTML 문서를 구성하는 개별적인 요소를 의미한다. HTML 요소는 렌더링 엔진에 의해 파싱되어 DOM을 구성하는 요소 노드 객체로 변환된다. 이때 HTML 요소의 어트리뷰트는 어트리뷰트 노드로, HTML 요소의 텍스트 컨텐츠는 텍스트 노드로 변한다. HTMl 요소간의 부자 관계를 반영해 HTML 요소를 객체화한 모든 노드 객체들을 트리 자료 구조로 구성한다. 트리자료구조 트리 자료구조는 노드들의 계층 구조로 이루어진.. 2022. 11. 3. [ 모던 자바스크립트 스터디 ] 브라우저의 렌더링 과정 브라우저가 HTML, CSS, 자바스크립트로 작성된 텍스트 문서를 파싱하는 과정을 살펴보자. 파싱 문서의 문자열을 토큰으로 분해하고, 토큰에 문법적 의미와 구조를 반영해 트리 구조의 파스트리를 생성하는 과정이다. 파싱이 완료된 이후에는 그 파스 트리를 기반으로 중간언어인 바이트코드를 생성하고 실행한다. 렌더링 HTML, CSS, 자바스크립트로 작성된 문서를 파싱해 브라우저에 시각적으로 출력하는 것이다. 브라우저는 다음과 같은 과정을 거쳐 렌더링을 수행한다. 브라우저는 HTML, CSS, 자바스크립트, 이미지 등 렌더링에 필요한 리소스를 요청하고 서버로부터 응답받음 브라우저에 탑재된 렌더링 엔진은 서버로부터 응답받은 HTML과 CSS 를 파싱해 DOM과 CSSOM 을 생성하고 이를 결합해 렌더트리 생성함 .. 2022. 11. 1. [ JavaScript ] 자바스크립트 기본 문법 | BOM(Browser Obejct Model) 이란 무엇인가 | 전역객체 window 이미지 출처 : https://commons.wikimedia.org/wiki/File:JavaScript-logo.png 해당 포스팅은 생활코딩의 이고잉 님의 강의를 기반으로 개인 공부용으로 정리한 포스팅임을 미리 알립니다. 자바스크립트 기본 문법 :: BOM(Browser Object Model) 이란 무엇인가? BOM(Browser Object Model)이란 웹브라우저의 창이나 프레임을 추상화해서 프로그래밍적으로 제어할 수 있도록 제공하는 수단입니다. BOM은 전역객체인 Window의 프로퍼티와 메소드들을 통해서 제어할 수 있습니다. 자바스크립트 기본 문법 :: 전역 객체 Window 전역 객체인 window 는 지난 포스팅에서 한번 다뤘었습니다. 다시 간략하게 설명드리자면, window 객체는 .. 2021. 2. 7. [ JavaScript ] 자바스크립트 기본 문법 | Object Model 이미지 출처 : https://commons.wikimedia.org/wiki/File:JavaScript-logo.png 해당 포스팅은 생활코딩의 이고잉 님의 강의를 기반으로 개인 공부용으로 정리한 포스팅임을 미리 알립니다. 자바스크립트 기본 문법 :: Obeject Model 이란 무엇인가? 웹브라우저의 구성요소들은 하나하나 객체화 되어있습니다. 자바스크립트로 객체를 제어해서 웹브라우저를 제어하는것입니다. 이 객체들은 서로 계층적인 관계로 구조화되어있는데 BOM과 DOM, JavaScript core는 이 구조를 구성하고 있는 가장 큰틀의 분류라고 할 수 있습니다. 해당 관계들을 그림으로 나타내면 위의 사진과 같습니다. 자바스크립트로 Object, Array, Function 객체들을 사용할수있는데,.. 2021. 2. 6. 이전 1 다음
