DOM은 문서의 구조를 노드로 표현합니다. 파서는 시작 태그에서 자식을 열고 종료 태그에서 부모로 돌아가며 트리를 만듭니다.
데모에서 입력 줄이 지나갈 때마다 해당 노드가 트리에 붙습니다. DOM을 바꾸면 브라우저가 관련 스타일과 화면을 다시 계산할 수 있으므로, 구조 변경과 화면 갱신을 함께 생각해야 합니다.
언제 쓰나
요소 선택, 이벤트 위임, 동적 UI 갱신을 이해할 때 기본 구조로 봅니다.
DOM 트리
DOM tree
HTML 요소가 부모와 자식 관계를 가진 노드 트리로 파싱됩니다.
···
<div class="v"><header>HTML → DOM <span id="src"><main></span></header><div class="stage tree"><div class="root">document</div><div class="branch" id="main">main<div class="children"><div id="h">h1</div><div id="p">p</div></div></div></div><div class="muted" id="note">Token 1 / 3</div></div>.v{width:min(94vw,760px);height:min(88vh,320px);padding:clamp(9px,2.4vmin,18px);border:1px solid var(--line);border-radius:12px;background:var(--surface);font:500 clamp(12px,2.4vmin,16px)/1.3 var(--font-sans,system-ui,sans-serif);display:flex;flex-direction:column;gap:clamp(5px,1.4vmin,10px);overflow:hidden}.v header{display:flex;align-items:center;justify-content:space-between;gap:8px;color:var(--accent);font-weight:700}.v header span{color:var(--muted);font-weight:500}.v .stage{flex:1;min-height:0;position:relative}.v .muted{color:var(--muted)}.v .active{background:color-mix(in srgb,var(--accent) 18%,var(--surface));border-color:var(--accent)!important;color:var(--fg)}.v button{font:inherit;color:var(--fg);background:var(--bg);border:1px solid var(--line);border-radius:7px;padding:5px 8px;cursor:pointer}.tree{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:5px}.root,.branch,.children div{border:1px solid var(--line);border-radius:7px;background:var(--bg);padding:5px 12px;text-align:center}.branch{position:relative;opacity:.25;transition:opacity .25s}.children{display:flex;gap:9px;margin-top:7px}.children div{opacity:.25;min-width:56px;transition:opacity .25s}.tree .on{opacity:1;border-color:var(--accent)}let i=0;const names=["main","h","p"],tags=["<main>","<h1>","<p>"];function tick(){names.forEach((n,j)=>document.getElementById(n).classList.toggle("on",j<=i));document.getElementById("src").textContent=tags[i];document.getElementById("note").textContent="Token "+(i+1)+" / 3";i=(i+1)%3}tick();setInterval(tick,800)