반응형
DOM은 단순히 태그를 나열한 게 아니라 태그(+ 텍스트, 주석 등)를 객체로 만들어서 트리로 연결한 것이에요.
핵심은 "객체" 라는 점이에요. 단순한 문자열 <h1>Hello</h1>이 아니라, JS에서 조작할 수 있는 프로퍼티와 메서드를 가진 객체예요.
<h1 class="title">Hello</h1>
이게 파싱되면 이런 객체가 돼요:
{
tagName: "H1",
className: "title",
textContent: "Hello",
style: {...},
parentNode: <body 노드>,
children: [텍스트 노드],
addEventListener: function() {...},
getAttribute: function() {...},
// ... 수십 가지 메서드
}
그래서 JS에서 이런 게 가능한 거예요:
const el = document.querySelector('h1')
el.textContent = '바뀐 텍스트' // 프로퍼티 수정
el.style.color = 'red' // 스타일 변경
el.addEventListener('click', fn) // 이벤트 등록
el.parentNode // 부모 노드 접근
HTML은 그냥 텍스트지만, DOM은 브라우저가 그걸 조작 가능한 객체 트리로 바꿔놓은 거예요.
Vue/React가 결국 하는 일도 이 DOM 객체들을 효율적으로 업데이트하는 거고요.
한 줄 요약: DOM = HTML 태그들을 JS로 조작 가능한 객체로 변환한 트리 구조
반응형
'Front-End > 네트워크(브라우저)' 카테고리의 다른 글
| 5.2 랜더트리 (0) | 2026.04.01 |
|---|---|
| 5. 서버 응답 + 브라우저 렌더링 (0) | 2026.04.01 |
| 4. HTTP 요청 — 실제 데이터를 주고받는 규칙 (0) | 2026.03.31 |
| 3-1. TLS 1.2, TLS1.3 차이 (0) | 2026.03.31 |
| 3. TLS handshake — HTTPS 암호화 연결 (0) | 2026.03.31 |