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

id, title, category, status, canonical_id, aliases, duplicate_of, source_trust_level, confidence_score, verification_status, tags, raw_sources, last_reinforced, github_commit, tech_stack

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

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

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

DocumentFragment — batch insert

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

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)

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

const range = document.createRange();
range.selectNodeContents(el);
const text = range.toString();

IntersectionObserver — lazy load

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 · Shadow DOM
• 응용: React · Web Components · Playwright
• Adjacent: CSSOM · Reflow_and_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