반응형
사이드 프로젝트를 진행하며 프론트에 백엔드 api를 연동하려고 하니
document라는 객체를 상당히 자주 사용하게 되었다.
document라는 객체는 무엇일까? 이 객체를 알기 위해선 DOM 구조 먼저 알아야한다.
🤍DOM(Document Object Model)이란?
HTML 문서를 브라우저가 읽었을 때, JavaScript가 접근하기 쉬운 객체 구조로 변환한 것을 DOM이라고 한다.
<!DOCTYPE html>
<html>
<head>
<title>LazyCat's Tistory</title>
</head>
<body>
<h1>안녕하세요</h1>
<p>저는 LazyCat입니다.</p>
</body>
</html>위에 HTML 문서를 브라우저가 읽으면 아래와 같은 DOM 구조로 변환된다.
document
ㄴhtml
ㄴhead
ㄴtitle
ㄴbody
ㄴh1
ㄴp
DOM 구조를 DOM 트리 구조라고도 부른다.
DOM 구조를 통해 우리가 처음에 알고 싶었던 document의 정체를 알 수 있게 되었다.
document는 DOM 트리의 시작점인 루트(root)를 나타낸다.
🤍document 객체란?
document 객체는 DOM 구조의 루트를 나타낸다고 설명했다.
즉, 개발자는 document라는 객체를 통해서 HTML 문서의 요소에 접근할 수 있는 것이다.
document와 함께 사용되는 메소드들
- getElementById()
- querySelector()
- appendChild()
반응형
'Programming > For interview' 카테고리의 다른 글
| [Servlet/Spring] Filter, Interceptor, AOP의 차이 (0) | 2025.01.18 |
|---|---|
| [Java] Java 버전에 따른 핵심 변경 사항 (Java8) (0) | 2024.12.18 |
| [Git] Git의 3가지 영역 (0) | 2024.12.17 |
| [Spring] HandlerMethodArgumentResolver (0) | 2024.12.11 |
| [Spring] Mock 테스트 (1) | 2024.12.04 |