DOM

1. 创建节点[createElement/createTextNode]

(1)

var para = document.createElement("p");

para.setAttribute("title","My paragrah");

document.body.appendChild(para);

(2)

var message = document.createTextNode("Hi, man");

var container = document.getElement("intro");

container.appendChild(message);

2. 复制节点[cloneNode]     

var para = document.createElement("p");

var message = document.createTextNode("Hi, man");

para.appendChild(message);

document.body.appendChild(para);

var newpara = para.cloneNode(true);

document.body.appendChild(newpara);

3. 插入节点[appendChild/insertBefore]

(1)

var message = document.getElementById("fineprint");

var container = document.getElementById("content");

container.appendChild(message);

(2)

var para = document.createElement("p");

var text = document.createTextNode("here comes");

para.appendChild(text);

container.insertBefore(para,message);

4. 删除节点[removeChild]

var message = document.getElementById("fineprint");

var container = message.parendNode;

container.removeChild(message);

5. 替换节点[replaceChild]

var container = document.getElementById("content");

var message = document.getElement("fineprint");

var para = document.createElemnt("p");

container.replaceChild(para,message);

6. 设置节点属性

(1) setAttribute

message.setAttribute("title","this is import!");

7. 查找节点

(1) getAttribute

var message = document.getElementById("fineprint");

var titletext = message.getAttribute("title");

(2) getElementById

(3) getElementsByTagName

var paras = document.getElementsByTagName("p");

for(var i=0; i

   paras[i].setAttribute("title","");

}

(4) hasChildNodes

var message = document.getElementById("fineprint");

if(message.hasChildNodes){

    var children = message.childNodes;

}

8. 节点的属性

(1) nodeName

(2) nodeType

(3) nodeValue

var message = document.getElementById("fineprint");

if(message.firstChild.noeType==3){ // TEXT_NODE

    message.firstChild.nodeValue = "This will work";

}

9. 遍历节点树

(1) childNodes

reference = node.childNodes[elementNode.childNodes.length-1]

(2) firstChild

(3) lastChild

(4) nextSibling

(5) parentNode

(6) previousSibling