javascript 的 DOM 操作

1. 访问兄弟节点

nextSibling && previousSibling

var bd = doucument.body;
bd.childNodes[0].nextSibling;
bd.previousSibling;

2. 访问首尾节点

firstChild && lastChild

firstChild相当于 childNodes[0] , lastChild 相当于 childNodes[childNodes.length - 1]

var bd = doucument.body;
bd.firstChild;
bd.lastChild;

3. 遍历DOM

function walkDOM(n){
  do {
    console.log(n);
    if(n.hasChildNodes()) {
      walkDOM(n.firstChild)
    }
  }while(n = n.nextSibling)
}

walkDOM(document.documentElement);
walkDOM(document.body);

4. 修改DOM节点内容

innerHTML

var my = document.getElementById("idName");
my.innerHTML = "我时修改后的内容~";

innerHTML可以接收任何HTML代码，所以我们也可以这么写

var my = document.getElementById("idName");
my.innerHTML = "<em>我时修改后的内容~<em>";

也可以使用nodeValue属性对文本进行修改

my.firstChild.nodeValue = "呀，我是修改后的内容！"

5. 修改样式

style

var p = document.getElementsByTagName[0];
p.style.border = "1px solid #ccc";

如果是有短横线的css属性，js中是不可以用的，但是可以将短横线后面的第一个字母大写，比如： padding-top 可以写成 paddingTop

var p = document.getElementsByTagName[0];
p.style.border = "1px solid #ccc";

6. 新建和插入DOM节点

createElement() && appendChild() && insertBefore()
appendChild() 只能将新节点添加到指定节点的末端， insertBefore() 可以精确地控制插入节点的位置，它比 appendChild() 多一个参数，该参数用于指定将新节点插入到哪一个元素的前面

var my = document.createElement("p");
my.innerHTML = "我是新建的节点哦~";

将新建的节点添加到DOM树结构中，这里是添加到了body最后一个子节点的后面

var my = document.createElement("p");
document.body.appendChild(my);

将新建节点插入到body元素的第一个子节点的前面

document.body.appendChild(my, document.body.firstChild);

纯DOM方法

var p = document.createElement('p');
var t1 = document.createTextNode("新文本节点1");
var t2 = document.createTextNode("新文本节点2");
p.appendChild(t1);
p.appendChild(t2);
document.body.appendChild(p);
document.body.appendChild(p);

7. 克隆节点（cloneNode()）

cloneNode() 有一个布尔类型的参数， true 代表深拷贝（包括所有的子节点）， false 代表浅拷贝，只针对当前节点

var e = document.getElementsByTagName("p")[1];
document.body.appendChild(e.cloneNode(true));

8. 移除节点（removeChild()）

var p = document.getElementsByTagName[0];
var removed = document.body.removeChild(p);

虽然该节点已经不在DOM树中，但是仍然可以对其调用所有的DOM方法

removed.firstChild;

9. 替换节点（replaceChild()）

在移除节点的同时，将另一个节点放在该位置

var p = document.getElementsByTagName("P")[1];
var replaced = document.body.replaceChild(remove, p);

如果想将某个子树中的内容一并抹去，最便捷的方式是将它的 innerHTML 设置为空字符串

document.body.innerHTML = "";

纯DOM删除的话，必须对所有的子节点进行遍历，逐个删除

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

现在，如果想删除body中所有的子节点，可以用 removeAll()

removeAll(document.body);