# 更新DOM 拿到一個DOM節點后，我們可以對它進行更新。 可以直接修改節點的文本，方法有兩種： 一種是修改`innerHTML`屬性，這個方式非常強大，不但可以修改一個DOM節點的文本內容，還可以直接通過HTML片段修改DOM節點內部的子樹： ``` // 獲取<p id="p-id">...</p> var p = document.getElementById('p-id'); // 設置文本為abc: p.innerHTML = 'ABC'; // <p id="p-id">ABC</p> // 設置HTML: p.innerHTML = 'ABC <span style="color:red">RED</span> XYZ'; // <p>...</p>的內部結構已修改 ``` 用`innerHTML`時要注意，是否需要寫入HTML。如果寫入的字符串是通過網絡拿到了，要注意對字符編碼來避免XSS攻擊。 第二種是修改`innerText`或`textContent`屬性，這樣可以自動對字符串進行HTML編碼，保證無法設置任何HTML標簽： ``` // 獲取<p id="p-id">...</p> var p = document.getElementById('p-id'); // 設置文本: p.innerText = '<script>alert("Hi")</script>'; // HTML被自動編碼，無法設置一個<script>節點: // <p id="p-id">&lt;script&gt;alert("Hi")&lt;/script&gt;</p> ``` 兩者的區別在于讀取屬性時，`innerText`不返回隱藏元素的文本，而`textContent`返回所有文本。另外注意IE&lt;9不支持`textContent`。 修改CSS也是經常需要的操作。DOM節點的`style`屬性對應所有的CSS，可以直接獲取或設置。因為CSS允許`font-size`這樣的名稱，但它并非JavaScript有效的屬性名，所以需要在JavaScript中改寫為駝峰式命名`fontSize`： ``` // 獲取<p id="p-id">...</p> var p = document.getElementById('p-id'); // 設置CSS: p.style.color = '#ff0000'; p.style.fontSize = '20px'; p.style.paddingTop = '2em'; ``` ## 練習 有如下的HTML結構： javascript Java ``` <!-- HTML結構 --> <div id="test-div"> <p id="test-js">javascript</p> <p>Java</p> </div> ``` 請嘗試獲取指定節點并修改： ``` 'use strict'; // 獲取<p>javascript</p>節點: var js = ???; // 修改文本為JavaScript: // TODO: // 修改CSS為: color: #ff0000, font-weight: bold // TODO: // 測試: if (js && js.parentNode && js.parentNode.id === 'test-div' && js.id === 'test-js') { if (js.innerText === 'JavaScript') { if (js.style && js.style.fontWeight === 'bold' && (js.style.color === 'red' || js.style.color === '#ff0000' || js.style.color === '#f00' || js.style.color === 'rgb(255, 0, 0)')) { alert('測試通過!'); } else { alert('CSS樣式測試失敗!'); } } else { alert('文本測試失敗!'); } } else { alert('節點測試失敗!'); } ```