概念與分工詞條 1-17

DOM

也常叫做：文件物件模型、DOM tree、DOM 節點

你可能會這樣說

錯誤訊息寫著「DOM element not found」——原來 DOM 是瀏覽器把頁面整理成的樹狀結構，AI 三不五時就提到它。

DOM 是瀏覽器把你的網頁整理成的一棵「家譜樹」：整頁是樹幹，標題、段落、按鈕是樹上的枝節，一層包一層。

JavaScript 就是在這棵樹上做事：找某個按鈕、改文字、換顏色，都是對樹上的節點動手。

AI 說「DOM 找不到」通常是指名字打錯、或東西還沒載入。把錯誤訊息整段貼給它，多半一下子就解。

<h1>歡迎</h1>
<button>按我</button>

文件
└─ body
├─ h1「歡迎」
└─ button「按我」

找到 button 這個節點 → 改文字 → 畫面即時變化：
document.querySelector('button').textContent = '按下去了！'

DOM＝瀏覽器把原始碼整理成的家譜樹，程式都對著這棵樹做事。

圖 1-19　三個分頁看懂 DOM：原始碼→家譜樹→程式動手改。

中文就可以

請用家庭樹的比喻向我解釋 DOM，然後：
1. 做一個按鈕，點下去會把頁面標題換掉。
2. 程式碼用註解標出哪一行是「找節點」、哪一行是「改內容」。
3. 故意把名字打錯一次給我看，示範錯誤長什麼樣、怎麼修。