2nd/10_Wiki/Topics/Architecture/DOM.md

---
id: wiki-2026-0508-dom
title: DOM (Document Object Model)
category: 10_Wiki/Topics
status: verified
canonical_id: self
aliases: [DOM, Document Object Model, DOM Tree]
duplicate_of: none
source_trust_level: A
confidence_score: 0.95
verification_status: applied
tags: [dom, web, browser, html, javascript]
raw_sources: []
last_reinforced: 2026-05-10
github_commit: pending
tech_stack:
  language: javascript
  framework: browser
---

# DOM (Document Object Model)

## 매 한 줄
> **"매 HTML/XML document 의 tree 표현, language-agnostic API"**. W3C 표준 (1998), 현재 WHATWG DOM Living Standard. 매 browser 매 internal representation; 2026 현재 React/Vue/Solid 매 abstraction layer 위에 있지만, performance/edge cases 매 직접 DOM 이해 매 essential.

## 매 핵심

### 매 구조
- **Document** root.
- **Element node** (`<div>`, `<p>`).
- **Text node** (literal text).
- **Attribute** (element 의 property; not separate child node since DOM4).
- **Comment node**.
- **DocumentFragment** — lightweight sub-tree, not connected.
- **ShadowRoot** — encapsulated sub-tree (Web Components).

### 매 traversal
- `parentNode`, `childNodes`, `firstChild`, `lastChild`, `nextSibling`, `previousSibling`.
- `children` (Element only), `firstElementChild`.
- `querySelector` / `querySelectorAll` — CSS selector.
- `closest(selector)` — ancestor matching.

### 매 mutation
- `appendChild`, `insertBefore`, `removeChild`, `replaceChild` (legacy).
- `append`, `prepend`, `before`, `after`, `replaceWith`, `remove` (modern).
- `cloneNode(deep)`.

### 매 응용
1. Vanilla JS DOM 조작.
2. React reconciler 매 virtual DOM diff → real DOM mutation.
3. Web Components Shadow DOM encapsulation.
4. Server-side render (jsdom, happy-dom) 매 SSR.
5. Browser automation (Playwright, Puppeteer).

## 💻 패턴

### Modern element creation (no innerHTML)
```javascript
const card = Object.assign(document.createElement('article'), {
  className: 'card',
});
card.append(
  Object.assign(document.createElement('h2'), { textContent: title }),
  Object.assign(document.createElement('p'), { textContent: body }),
);
container.append(card);
```

### Event delegation
```javascript
list.addEventListener('click', (e) => {
  const item = e.target.closest('.item');
  if (!item || !list.contains(item)) return;
  handleClick(item.dataset.id);
});
```

### DocumentFragment — batch insert
```javascript
const frag = document.createDocumentFragment();
for (const item of items) {
  const li = document.createElement('li');
  li.textContent = item.name;
  frag.append(li);
}
list.append(frag); // single reflow
```

### MutationObserver
```javascript
const observer = new MutationObserver((mutations) => {
  for (const m of mutations) {
    if (m.type === 'childList') console.log('children changed');
  }
});
observer.observe(target, { childList: true, subtree: true, attributes: true });
```

### Shadow DOM (Web Component)
```javascript
class CounterButton extends HTMLElement {
  #count = 0;
  connectedCallback() {
    const root = this.attachShadow({ mode: 'open' });
    root.innerHTML = `<style>button{padding:8px}</style><button>0</button>`;
    root.querySelector('button').onclick = () => {
      this.#count++;
      root.querySelector('button').textContent = this.#count;
    };
  }
}
customElements.define('counter-button', CounterButton);
```

### Range & Selection
```javascript
const range = document.createRange();
range.selectNodeContents(el);
const text = range.toString();
```

### IntersectionObserver — lazy load
```javascript
const io = new IntersectionObserver((entries) => {
  for (const e of entries) {
    if (e.isIntersecting) {
      e.target.src = e.target.dataset.src;
      io.unobserve(e.target);
    }
  }
});
document.querySelectorAll('img[data-src]').forEach((img) => io.observe(img));
```

## 매 결정 기준
| 상황 | Approach |
|---|---|
| App-level UI | React / Vue / Solid (don't touch DOM) |
| Library / web component | Shadow DOM + custom element |
| One-off page | Vanilla JS (`querySelector`, `append`) |
| Test / SSR | jsdom / happy-dom |
| Watch external mutations | MutationObserver |

**기본값**: framework abstraction; vanilla DOM API for libraries / leaf optimization.

## 🔗 Graph
- 부모: [[Web Standards]]
- 변형: [[Virtual_DOM과_Reconciliation|Virtual DOM]] · [[Shadow DOM]]
- 응용: [[React]] · [[Web Components]] · [[Playwright]]
- Adjacent: [[CSSOM]] · [[Reflow_and_Repaint|Reflow & Repaint]]

## 🤖 LLM 활용
**언제**: DOM snippet 생성, accessibility audit, querySelector 추천.
**언제 X**: real-time interaction (LLM 매 round-trip 너무 느림).

## ❌ 안티패턴
- **innerHTML with user input**: XSS.
- **Layout thrashing**: read-write-read-write 매 force reflow 매 loop.
- **No event delegation**: 매 list item 매 listener → memory leak.
- **Detached node leak**: removed but reference 보유 → GC 실패.
- **Manipulate DOM in framework-controlled subtree**: React reconciler 와 충돌.

## 🧪 검증 / 중복
- Verified (WHATWG DOM Living Standard 2026, MDN).
- 신뢰도 A.

## 🕓 Changelog
| 날짜 | 변경 |
|---|---|
| 2026-05-08 | Phase 1 |
| 2026-05-10 | Manual cleanup — full canonical content with modern DOM APIs |