廖雪峰js教程筆記12 用DOM更新 innerHMTL 和修改css樣式

標籤：名稱   內容   value   div   top   支援   ring   code   結構   

拿到一個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<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>

請嘗試擷取指定節點並修改：

 

// 擷取<p>javascript</p>節點:
var js = document.getElementById(‘test-js‘);

// 修改文本為JavaScript:
// TODO:
js.innerHTML=‘JavaScript‘;

// 修改CSS為: color: #ff0000, font-weight: bold
// TODO:
js.style.color=‘#ff0000‘;
js.style.fontWeight=‘bold‘;

廖雪峰js教程筆記12 用DOM更新 innerHMTL 和修改css樣式