Notice
Recent Posts
Recent Comments
Link
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | |||||
| 3 | 4 | 5 | 6 | 7 | 8 | 9 |
| 10 | 11 | 12 | 13 | 14 | 15 | 16 |
| 17 | 18 | 19 | 20 | 21 | 22 | 23 |
| 24 | 25 | 26 | 27 | 28 | 29 | 30 |
Tags
- Frontend Study
- frontendstudy
- 배열메소드
- CSS
- addEventListener
- 리액트
- input
- 렌더링
- HTML
- try.. catch
- 비동기함수
- webProject
- Props
- this 객체
- 메소드 실행
- useRef
- typeScript
- JavaScript
- useState
- REACT
- 배열
- 함수 실행
- 이벤트
- FrontendStydy
- DOM
- promise
- 자바스크립트
- callback함수
- 컴포넌트
- 이벤트핸들링
Archives
- Today
- Total
이다닷
[JavaScript] Day 9 - DOM은 무엇일까? 화면조작! 본문
DOM을 알아보기 전에
웹브라우저는 HTML 문서를 해석하고, 화면을 통해 해석된 결과를 보여준다.
해석한 HTML 코드를 화면을 통해 보여주는 과정을 '렌더링'이라고 한다.
렌더링의 세부 과정
브라우저는 HTML 코드를 해석해서 요소들을 트리 형태로 구조화해 표현하는 문서를 생성한다.
이를 DOM이라고 하며, 브라우저는 DOM을 통해 화면에 웹 콘텐츠들을 렌더링한다.
아래에 있는 사진처럼 트리 형태를 띄우게 된다.
DOM의 존재 목적
DOM은 자바스크립트를 사용해서 웹 콘텐츠를 추가, 수정, 삭제하거나 마우스 클릭, 키보드 타이핑 등 이벤트에 대한 처리를 정의할 수 있도록 제공되는 프로그래밍 인터페이스이다.
'JavaScript' 카테고리의 다른 글
| [JavaScript] Day 11 - 비교 연산과 BOOLEAN (2) | 2023.01.25 |
|---|---|
| [JavaScript] Day 10 - 문서 인터페이스 그리고 기능들 (0) | 2023.01.24 |
| [JavaScript] Day 8 - NULL, UNDEFINED 그리고 BOOLEAN (0) | 2023.01.20 |
| [JavaScript] Day 7 - 연산 그리고 연산자 (0) | 2023.01.17 |
| [JavaScript] Day 6 - 템플릿 리터럴 (0) | 2023.01.13 |
'JavaScript' Related Articles
more
