1、innerHTML 屬性

（參考自《JavaScript高階程式設計》294頁）

在讀模式下，innerHTML 屬性返回與呼叫元素的所有子節點（包括元素、註釋和文字節點）對應的 HTML 標記。在寫模式下，innerHTML 會根據指定的值建立新的 DOM 樹，然後用這個 DOM 樹完全替換呼叫元素原先的所有子節點。下面是一個例子。

<div id="content">
    <p>This is a <strong>paragraph</strong> with a list following it.</p>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
</div>

對於上面的<div>元素來說，它的 innerHTML 屬性會返回如下字串。

<p>This is a <strong>paragraph</strong> with a list following it.</p>
<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

2、outerHTML 屬性

在讀模式下，outerHTML 返回呼叫它的元素及所有子節點的 HTML 標籤。在寫模式下，outerHTML 會根據指定的 HTML 字串建立新的 DOM 子樹完全替換呼叫元素。下面是一個例子。

<div id="content">
    <p>This is a <strong>paragraph</strong> with a list following it.</p>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
</div>

如果在<div>元素上呼叫 outerHTML，會返回與上面相同的程式碼，包括<div>本身。

使用 outerHTML 屬性以下面這種方式設定值：

div.outerHTML = "<p>This is a paragraph.</p>";

這行程式碼完成的操作與下面這些 DOM 指令碼程式碼一樣：

var p = document.createElement("p");
p.appendChild(document.createTextNode("This is a paragraph."));
div.parentNode.replaceChild(p, div);

結果，就是新建立的<p>元素會取代 DOM 樹中的<div>元素。

replaceChild() 方法用新節點替換某個子節點。

語法：

node.replaceChild(newnode,oldnode)

 3、innerText 屬性

通過 innerText 屬性可以操作元素中包含的所有文字內容，包括子文件樹中的文字。在通過 innerText 讀取值時，它會按照由淺入深的順序，將子文件樹中的所有文字拼接起來。在通過 innerText 寫入值時，結果會刪除元素的所有子節點，插入包含相應文字值的文字節點。下面是一個例子：

<div id="content">
    <p>This is a <strong>paragraph</strong> with a list following it.</p>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
</div>

對於這個例子中的 <div> 元素而言，其中 innerText 屬性會返回下列字串：

This is a paragraph with a list following it.
Item 1
Item 2
Item 3

使用 innerText 屬性設定這個<div>元素內容，則只需一行程式碼：

div.innerText = "Hello world!";

執行這行程式碼後，頁面的 HTML 程式碼就會變成如下所示：

<div id="content">Hello world!</div>

設定 innerText 屬性移除了先前存在的所有子節點，完全改變了 DOM 樹。

設定 innerText 永遠只會生成當前節點的一個子文字節點，而為了確保只生成一個字文字節點，就必須要對文字進行 HTML 編碼。利用這一點，可以通過 innerText 屬性過濾掉 HTML 標籤。方法是將 innerText 設定等於 innerText，這樣就可以去掉所有 HTML 標籤，比如：

div.innerText = div.innerText;

執行這行程式碼後，就用原來的文字內容替換了容器元素中的所有內容（包括子節點，因而也就去掉了 HTML 標籤）。舉個栗子：

HTML程式碼：

<label id="lab">請輸入北京今天空氣質量：<input id="aqi-input" type="text"></label>

控制檯輸出：

4、outerText 屬性

除了作用範圍擴大到了包含 呼叫它的節點之外，outerText 與innerText 基本上沒有多大區別。在讀取文字值時，outerText 與 innerText 的結果完全一樣。但在寫模式下，outerText 就完全不同了：outerText 不只是替換呼叫它的元素的子節點，而是會替換整個元素（包括子節點）。比如：

div.outerText = "Hello world!";

這行程式碼實際上相當於如下兩行程式碼：

var text = document.createTextNode("Hello world!");
div.parentNode.replaceChild(text,div);

本質上，新的文字節點會完全取代呼叫 outerText 的元素。此後，該元素就從文件中被刪除，無法訪問。

注：該屬性在 Firefox 瀏覽器裡沒用：

在 Chrome 瀏覽器裡：

5、value 屬性

屬性可設定或返回密碼域的預設值。獲取文字框的值。