한눈에 보는 정의
브라우저가 HTML을 읽어 만든 페이지 구조를 나무 모양 객체로 나타낸 것. 자바스크립트는 DOM을 고쳐 화면을 바꾼다.
이런 말로 들어요
- DOM이 다 그려지기 전에 스크립트가 실행돼서 버튼이 안 먹었어요.
- 개발자 도구에서 DOM을 보면 실제로 들어간 문구를 확인할 수 있어요.
그림으로 보기
브라우저는 HTML을 읽어 DOM이라는 나무 구조를 만듭니다. 자바스크립트가 이 구조를 고치면 화면이 바로 바뀝니다.
하캄솔루션 자체 제작 모션그래픽자세히 알아보기
HTML 파일은 글자일 뿐이고, 브라우저는 이것을 읽어 "문서 안에 머리글이 있고, 그 안에 메뉴가 있다"는 식의 나무 구조로 바꿔 기억합니다. 이 구조가 DOM입니다. 자바스크립트가 버튼을 누를 때 문구를 바꾸거나 목록에 한 줄을 더하는 일은 모두 DOM을 고치는 작업입니다. 개발자 도구의 요소(Elements) 탭에서 보이는 것도 원본 HTML이 아니라 지금의 DOM입니다.
실무 예시
예를 들어 상담 신청을 누르면 "접수되었습니다" 문구가 나타나는 기능은, 자바스크립트가 DOM에 문구 요소를 새로 넣어서 만듭니다.
함께 살펴볼 점
원본 HTML과 지금 화면의 DOM은 다를 수 있습니다. 검색엔진이나 다른 도구가 보는 내용이 화면과 같은지 확인할 때 이 차이를 함께 봅니다.
AI에게 이렇게 요청해 보세요
이 페이지의 상담 신청 버튼을 누르면 버튼 아래에 "접수되었습니다" 문구를 DOM에 추가하는 자바스크립트를 짜 줘. 화면 낭독기도 알 수 있게 aria-live를 넣어 줘.
코딩·작성 도구에 붙여 쓰기 전에 내 상황에 맞게 바꾸고, 결과는 직접 확인하세요.출처와 검토 정보
- Document Object Model (DOM) - MDN 새 창
DOM이 문서를 논리적 트리로 표현하고, DOM 메서드로 문서의 구조·스타일·내용을 바꿀 수 있다는 설명을 확인했습니다.
자료 확인
내용 검토
최초 발행 · 내용 수정