dom 是 JavaScript 操作網頁內容的核心機制，它將 html 文檔轉化為樹狀結構，使 JS 能訪問和修改頁面元素。1.dom 全稱 document Object model（文檔對象模型），瀏覽器解析 html 后生成 dom 樹；2.獲取元素常用方法包括 document.getelementbyid、queryselector、queryselectorall 等；3.修改內容可用 textcontent、innerHTML，修改樣式推薦使用 classlist 或 style 屬性，屬性操作用 setattribute 和 getattribute；4.添加元素需創建后用 appendchild 插入，刪除元素可用 remove 或 removechild；5.注意確保 dom 加載完成后再操作，減少頻繁重排重繪以優化性能。
DOM 是 JavaScript 中操作網頁內容的核心機制。簡單來說，它把 HTML 文檔轉化成一個樹狀結構，JS 可以通過這個結構來訪問、修改頁面上的任何元素。
什么是 DOM？
DOM 全稱是 Document Object Model（文檔對象模型）。當你打開一個網頁時，瀏覽器會解析 HTML 文件，并把它轉換成一個由節點組成的樹形結構，這個結構就是 DOM。JS 就是通過操作這個結構來實現動態更新頁面的。
比如，一個簡單的 HTML 頁面：
<p>Hello World</p>
在 DOM 中就表示為一個 p 元素節點，里面包含一個文本節點 “Hello World”。
如何獲取 DOM 元素？
要操作頁面上的元素，首先要能“找到”它們。常用的方法有以下幾個：
- document.getElementById(‘id’)：通過 ID 獲取元素，最直接的方式。
- document.querySelector(‘選擇器’)：支持 css 選擇器，靈活強大。
- document.querySelectorAll(‘選擇器’)：獲取多個匹配的元素。
- document.getElementsByClassName(‘class名’)：通過類名獲取，返回的是一個類數組。
- document.getElementsByTagName(‘標簽名’)：通過標簽名獲取。
舉個例子，如果你有一個按鈕：
<button id="myBtn">點我</button>
你可以這樣獲取它：
const btn = document.getElementById('myBtn');
或者用更通用的 querySelector：
const btn = document.querySelector('#myBtn');
兩者都能達到目的，看個人習慣和具體場景使用。
如何修改 DOM 內容？
拿到元素之后，就可以對它的內容、樣式、屬性等進行操作了。
修改文本內容
-
使用 textContent 或 innerText（推薦前者）：
const para = document.querySelector('p'); para.textContent = '新的內容';
修改 HTML 內容
-
使用 innerHTML 來插入 HTML 字符串：
const container = document.querySelector('.container'); container.innerHTML = '<p>這是一段新內容</p>';
?? 注意：innerHTML 插入的內容如果來自用戶輸入，可能會帶來 xss 安全問題。
修改樣式
-
直接通過 style 屬性設置：
para.style.color = 'red'; para.style.fontSize = '20px';
-
更推薦的做法是通過添加/移除 class 的方式控制樣式。
修改屬性
-
使用 setAttribute() 和 getAttribute()：
const link = document.querySelector('a'); link.setAttribute('href', 'https://example.com');
如何添加或刪除 DOM 元素？
有時候你可能需要動態地往頁面中添加或刪除元素。
創建并添加元素
- 創建元素：document.createElement(‘標簽名’)
- 設置內容或屬性
- 添加到頁面：父元素.appendChild(新元素)
例如：
const newPara = document.createElement('p'); newPara.textContent = '這是一個新段落'; document.body.appendChild(newPara);
刪除元素
- 使用 removeChild() 或直接調用 remove() 方法：
const oldPara = document.querySelector('p'); oldPara.remove(); // 或者 document.body.removeChild(oldPara)
常見注意事項
- 操作 DOM 之前確保元素已經加載完成，否則會找不到元素。可以將 JS 放在 DOMContentLoaded 事件里，或者放在 body 最后。
- 頻繁操作 DOM 會影響性能，盡量減少重排重繪。
- 使用 classList 來操作類名比直接修改 className 更方便安全。
基本上就這些。DOM 操作雖然不復雜，但細節很多，稍不注意就會出錯。多練習幾種常見方法，慢慢就能熟練掌握了。
