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);
    }
}