DOM節點的修改

首先，咱們將最後段落賦值給變量my：

var my = document.getElementById('closer');

接下來，咱們就可以輕鬆地經過修改對象的innerHTML值來修改段落中的文本：

因爲innerHTML能夠接受任何HTML代碼串，因此咱們也能夠用它在當前的DOM樹中再新建一個em節點：

除此以外，咱們還能夠經過修改既定文本類節點的nodeValue屬性來實現相關的文本修改。

修改樣式

元素對象中有個style屬性，這是一個用來反映當前CSS樣式的屬性。

另外，CSS屬性中的短線在JavaScript中是不可用的。對於這種狀況，咱們只須要直接跳過並將下一個單純的首字母大寫便可。例如，padding-top能夠寫成paddingTop、margin-left能夠寫成marginLeft等，以此類推。

新建節點

一般狀況下，咱們能夠用createElement()和createTextNode()這兩個方法來建立新節點。而appendChild()方法則能夠用來將新節點添加到DOM樹結構中。

若是你想將下面的HTML代碼加入body元素後端：

<p>one mor paragraph<strong>bold</strong></p>

讓咱們來看看完成這個代碼應該怎麼寫

//新建一個節點p
var myp = document.createElement('p');
//建立一個文本節點
var myt = document.createTextNode('one more paragraph');
myp.appendChild(myt);
//建立一個strong和另一個文本節點
var str = document.createElement('strong');
str.appendChild(document.createTextNode('bold'));
myp.appendChild(str);
//添加到body中
document.body.appendChild(myp);

cloneNode()

另外，拷貝現有節點也是一種建立節點的方法。這須要用到cloneNode()方法，該方法有一個布爾類型的參數（true=深拷貝，包括全部子節點；false=淺拷貝，只針對當前節點）。

這時候，咱們在頁面上不會看出有什麼變化，由於淺拷貝只複製了p節點，並無包含它的任何子節點。這意味着該段落中文本並無複製過來。但若是咱們如今建立的是一份深拷貝，那麼以P元素爲首的整個DOM子樹都將會被拷貝過來。

insertBefore()

經過appendChild()方法，咱們只能將新節點添加到指定節點的末端。若是想更精確地控制插入節點的位置，咱們還可使用insertBefore()方法。該方法與appendChild()基本相同，只不過它多了一個額外參數，該參數能夠用於指定將新節點插入哪個元素的前面。

document.body.insertBefore(document.createTextNode('boo!'),document.body.firstChild);

移除節點

想從DOM樹中移除一個節點，咱們能夠調用removeChild()。下面，咱們移除第二段落，若是咱們稍後還需用到被移除的節點的話，能夠保存該方法的返回值。

除此以外，還有一個replaceChild()方法，該方法能夠在移除一個節點的同時將另外一個節點放在該位置。

刪除某個指定節點全部子節點的函數：

function removeAll(n){
    while(n.firstChild){
        n.removeChild(n.firstChild);
    }
}