# DOM tree

hameee

🌈 학습을 위해 Must-Know-About-Frontend에서 가져온 내용을 수정, 추가하여 작성한 글입니다. 기존 내용과 대부분 유사하며 Summary 부분은 추가하였습니다. Summary | | 설명 | | :--------: | :-------- | | 카테고리 | 웹 브라우저 관련 객체모델 | | BOM | 브라우저의 창이나 프레임을 프로그래밍적으로 제어할 수 있게 해주는 객체모델(window) | | DOM | 웹페이지를 프로그래밍적으로 제어할 수 있게 해주는 객체모델(Node)| BOM (Browser Object Model) 브라우저의 창이나 프레임을 프로그래밍적으로 제어할 수 있게 해주는 객체모델 이다. 이를 통해서 브라우저의 새 창을

kihwn

브라우저 렌더링이란? 브라우저 렌더링은 웹 페이지를 사용자의 눈에 보이는 화면으로 변환하는 과정을 말한다. 즉 쉽게 말해 웹 페이지의 내용을 브라우저 화면에 표시하는 과정을 의미한다. 웹 페이지를 구성하는 HTML, CSS 및 JavaScript와 같은 웹 리소스를 해석하고, 브라우저 창에 그래픽으로 표시하는 과정을 포함한다. 위 사진은 브라우저 구성요소이다. 이 중 렌더링 엔진이 브라우저 렌더링을 담당하게 된다. 위 사진과 같은 과정을 통해 브라우저 렌더링이 이루어진다. DOM트리, CSS파서 등을 기반으로

just-do-justin

웹 브라우저 렌더링 과정 1. 파싱(Parse) 웹 브라우저는 HTML, CSS 및 JavaScript와 같은 웹 페이지의 리소스를 서버로부터 가져옵니다. 그리고 가져온 리소스들은 파싱되어 문서 객체 모델(DOM) 및 CSS 객체 모델(CSSOM)로 변환됩니다. 이 단계에서 HTML 마크업을 DOM 트리로 구문 분석하고, CSS 규칙을 파싱하여 CSSOM 트리를 구성합니다. 그리고 DOM 트리와 CSSOM 트리를 이용해서 Render Tree를 생성하고, 문서의 구조와 각 노드의 스타일 속성이 입력되게 됩니다. 파싱이란? 파싱은 주어진 문장이나 코드를 구성 요소로 분해하고 그 구조를 이해하는 과정을 말합니다. 또한 파싱 과정에서 코드 분석을 하며, 특정 액션을 취하거나 데이터 추출, 포괄적인 개념으로의 변환 등의 다양한 목적을 달성할 수도 있습니다. 따라서 파싱을 위해서는 해당 도메인에서의 특정 지식이나 약속된 규칙을 잘 이해합니다. 2. 레이아웃(La

youa7878

❤️‍🔥 브라우저 렌더링 브라우저 렌더링에서 렌더링(rendering)이란 HTML, CSS, JavaScript 등 개발자가 작성한 문서가 브라우저에서 출력되는 과정을 의미한다. 현존하는 브라우저마다 다르지만, 브라우저는 기본적으로 렌더링을 수행하는 렌더링 엔진을 가지고 있다. ❤️‍🔥 브라우저 렌더링 과정 사용자가 브라우저를 통해 웹 사이트에 접속 브라우저는 서버로부터 HTML, CSS, JavaScript와 같은 웹사이트에 필요한 리소스를 다운 렌더링 엔진은 전달받은 HTML 문서를 파싱(parsing)해 DOM(Document Object Model, 문서 객체 모델) 트리를 만든다. 이어서 다운 받은 외부 CSS 파일과 함께 포함된 스타일 요소를 파싱(

pdg02307

DOM 이란? DOM(문서객체모델, Document Object Model) > 객체 지향 모델로써 구조화된 문서를 표현하는 형식 XML이나 HTML 문서의 프로그래밍 인터페이스 문서의 구조화된 표현 (structured Representation)을 제공하여 프로그래밍 언어가 문서 구조, 스타일, 내용 등을 변경 할 수 있도록 한다. DOM은 프로그래밍 언어와 독립적이다. 주로 자바스크립트를 사용하지만, DOM의 구현은 어떠한 언어에서도 가능하다. DOM의 종류 > Core DOM HTML DOM XML DOM Document 객체 정의 > 웹 페이지를 의미한다. 웹 페이지에 존재하는 HTML 요소에 접근하고자 할 때는 반드시 Document 객체부터 시작해야 한다. `` HTML 글을 트리구조로 바꾼다고 생각하면 쉽다. 메소드 > HTML 요소의 선택 HTML 요소의 생성

wlwl99

브라우저 렌더링 : HTML, CSS, JavaScript 등 개발자가 작성한 문서를 브라우저가 그래픽 형태로 화면에 출력하는 과정 브라우저마다 가지고 있는 렌더링 엔진이 요청 받은 데이터를 화면에 렌더링하는 역할을 담당한다. 파이어폭스 - Gecko 사파리 - Webkit 크롬, 오페라 - Blink 아웃룩 익스프레스, 마이크로소프트 아웃룩 - Trident 렌더링 엔진 동작 과정 사용자가 브라우저를 통해 웹 사이트에 접속하면, 브라우저는 서버로부터 HTML, CSS, JavaScript 등 웹 사이트에 필요한 리소스를 다운받는다. [](https://medium.com/@gneutzling/the-rendering-process-of-a-web-page-78e

keynene

DOM Tree 문서노드 > 요소노드 > 어트리뷰트노드 > 텍스트노트 순으로 구성된 중첩관계 요소저장 요소검사/삭제 conole.group : groupEnd()함수 전까지 그룹을 가시적으로 출력해줌 removeChild() : 해당 배열/값의 노드 삭제

chickenrun

웹브라우저는 html 문서를 해석하고, 화면을 통해 그 결과를 보여준다. 해석한 html 코드를 화면을 통해 보여주는 과정을 '렌더링'이라고 한다. 브라우저는 HTML 코드를 해석해서 요소들을 트리 형태로 구조화하여 표현하는 문서(데이터)를 생성한다. 이를 DOM(Document Object MODEL)이라 부르며, 브라우저는 DOM을 통해 화면에 웹 콘텐츠들을 렌더링한다. HTML 코드는 요소가 다른 요소 안에 포함되는 형태를 띄게 되는데, 그렇기 때문에 Tree형태의 계층 구조를 통해 웹 문서를 표현한다.

hyun

이 포스트에서 다룰 것 우리가 브라우저를 켜서 사이트에 접속하면 브라우저 내부에서는 어떤 일이 발생하는지를 알아본다. IP주소 확인 먼저 우리가 주소창에 www.abc.com이라고 치게 되면, 웹 브라우저는 DNS에게 호스트의 IP주소를 물어보게 된다. > 브라우저: www.abc.com의 IP주소를 알려줘! > DNS: 이 호스트의 IP주소는 1.1.1.1이야. 이 과정은 이 포스트에서 자세하게 다루었다. 3-way Handshake 그러면 브라우저는 이 IP주소에 있는 서버를 찾아간다. 이 때 랜덤한 숫자를 적은 번호표를 들고 가는데, 이걸 라고 한다. 이 번호표를 서버에게 건네면서 악수를 요청하고, 서버는 번호표에 1을 더해서 다시 브라우저에게 돌려준다. 브라우저는 받은 번호표에 다시 1을 더해서 서버에게 다시 건네는데, 이 과정을 라고 한다. 데이터를 주고받기 위해 가 끝나면, 브라우저는 이제 서버

i_the_agnes

what is DOM + EVENT in JavaScript? 학습 폭표 웹에서 HTML, CSS< Javascript가 어떤 시능을 하는지 설명할 수 있다. HTML에서 Javacript vanilla javascript?? what is that?

burndown

DOM이란 무엇인가? Document Object Model로, 문서 객체 모델이라고 부른다. Document - 파일(HTML, XML) Object - Tag, elements Model - layout, structure > DOM은 HTML,XML같은 파일의 Tag,element 모델이다. > > DOM을 DOM tree 라고 많이 부른다. > DOM은 어떻게 생기는가? HTML을 브라우저가 파싱(parse)을 하여 DOM tree를 만듭니다. 위의 HTML코드를 브라우저가 파싱하여 아래와 같은 DOM tree를 만듭니다. 파싱 결과로 여러개의 노드들로 이루어진 DOM Tree가 생깁니다. 브라우저마다 DOM Tree 생성방식이 다를 수 있습니다. 왜 DOM을 쓰는가? DOM은 HTML, XML의 구조를 프로그래밍적으로 read, access, update 를 쉽게 할수있게합니다. DOM은 Document를 프로그래밍