한국어
메뉴

DOM(문서 객체 모델)란?

HTML이나 XML 문서를 요소나 텍스트 등을 노드로 하는 트리 구조로 나타내어, 프로그램에서 읽고 쓸 수 있게 한 인터페이스. 브라우저는 HTML을 파싱하여 DOM을 만들고, JavaScript는 document.querySelector 등으로 요소를 찾아 텍스트나 속성, 스타일을 바꿔 쓰거나 요소를 추가한다. DOM이 바뀌면 브라우저는 필요에 따라 배치 계산(레이아웃)과 그리기를 다시 하므로, 변경이 너무 많으면 표시가 느려진다.

일본어 명칭: DOM(Document Object Model)

DOM(문서 객체 모델)은(는) 웹 기술 기초 등 1개 분야의 연습 문제 3개에 나와요.

분야: 웹 기술 기초

도전해 보기: DOM(문서 객체 모델) 관련 문제

브라우저에서 사용되는 DOM(Document Object Model)에 대한 설명으로 올바른 것은?

  1. A서버에 있는 데이터베이스의 테이블 구조를 브라우저로 보내기 위해 HTML 표(table 요소) 형태로 변환한 것이다
  2. BHTML 문서를 요소 등을 노드로 하는 트리 구조로 나타낸 것으로, JavaScript에서 읽고 쓸 수 있다
  3. CCSS 규칙을, 파일을 작게 하여 읽어 들이기를 빠르게 하기 위해 공백을 제거하고 압축한 형식이다
정답과 해설 보기

정답: B. HTML 문서를 요소 등을 노드로 하는 트리 구조로 나타낸 것으로, JavaScript에서 읽고 쓸 수 있다

브라우저는 HTML을 파싱하여, html 요소를 루트로 하고 head, body, 그 안의 단락 등을 노드로 하는 트리 구조(DOM 트리)를 만듭니다. JavaScript는 document.querySelector로 요소를 찾거나, 텍스트나 속성을 바꿔 쓰거나, 요소를 추가하여 DOM을 통해 페이지를 바꿉니다. DOM이 바뀌면 브라우저는 필요에 따라 배치 계산과 그리기를 다시 합니다. DOM은 특정 프로그래밍 언어에 의존하지 않는, 문서를 조작하기 위한 인터페이스로 표준화되어 있습니다.

해설 속 DOM(문서 객체 모델)

DOM(문서 객체 모델)이(가) 나오는 문제 (3)

  1. 브라우저에서 사용되는 DOM(Document Object Model)에 대한 설명으로 올바른 것은?
  2. 브라우저가 첫 화면을 표시하기까지의 처리(중요 렌더링 경로)에서는 <head> 안에 속성 없이 쓴 <script src="app.js">가 있으면 HTML 파싱이 거기서 멈춘다. 이 요소에 defer 속성을 붙였을 때의 동작으로 올바른 것은?
  3. Service Worker에 대한 설명으로 올바른 것은?

관련 용어

동일 출처 정책(Same-origin Policy) 리버스 프록시(Reverse Proxy) 서버 사이드 렌더링(SSR) 웹소켓(WebSocket) 이벤트 루프(Event Loop) 쿠키(Cookie) CORS(교차 출처 리소스 공유) HTTP 메서드(HTTP Method) HTTP 상태 코드(HTTP Status Code) HTTP(하이퍼텍스트 전송 프로토콜)

용어집으로 돌아가기