如何添加斩例、移除、移動(dòng)巨柒、復(fù)制、創(chuàng)建和查找節(jié)點(diǎn)?
- 創(chuàng)建節(jié)點(diǎn)
1.1 創(chuàng)建元素節(jié)點(diǎn)：createElement()
栗子： var p = document.createElement("p");
p.nodeType;//1
1.2 創(chuàng)建文本節(jié)點(diǎn)： createTextNode()
栗子：var textNode = document.createTextNode("I am text node");
textNode.nodeType;//3
1.3 文本節(jié)點(diǎn)的合并：normalize()
在父節(jié)點(diǎn)調(diào)用柠衍，父節(jié)點(diǎn)的兩個(gè)相鄰的文本子節(jié)點(diǎn)會(huì)合成一個(gè)文本節(jié)點(diǎn)洋满。
1.4 文本節(jié)點(diǎn)的分割：splitText(參數(shù))
參數(shù)為一個(gè)以0開始的文本下標(biāo)索引。以此分割珍坊，參數(shù)左為一個(gè)文本節(jié)點(diǎn)牺勾，參數(shù)及右為另一個(gè)文本節(jié)點(diǎn)。
1.5 ->1.3和1.4的栗子：
var p = document.createElement("p");
var textNode = document.createTextNode("I am text node");
//appendChild()
p.appendChild(textNode);
//分割
var newTextNode = p.firstChild.splitText(5);
p.firstChild.nodeValue;//"I am "
p.lastChild.nodeValue;//"text node"
newTextNode.nodeValue;//"text node"
//合并
p.normalize();
p.firstChild.nodeValue;//"I am text node"
- 添加節(jié)點(diǎn)
2.1 向父節(jié)點(diǎn)的childNodes的末尾添加子節(jié)點(diǎn)：appendChild(nodeInsert)
若添加的節(jié)點(diǎn)已存在childNodes中阵漏，則把該節(jié)點(diǎn)轉(zhuǎn)移到末尾來驻民。
栗子見1.5
2.2 向父節(jié)點(diǎn)的childNodes的其他子節(jié)點(diǎn)前插入子節(jié)點(diǎn)：insertBefore(nodeInsert, nodeExist);
當(dāng)?shù)诙€(gè)參數(shù)為null時(shí)，insertBefore(nodeInsert, null)效果等同appendChild()
2.3 通過innerHTML屬性 添加節(jié)點(diǎn)（或者說替換子樹）
栗子： node.innerHTML = "<p>I become node by innerHTML</p>"履怯；
- 復(fù)制節(jié)點(diǎn)
3 復(fù)制節(jié)點(diǎn) cloneNode(bool)
栗子： nodeA.clone(ture);
參數(shù)為布爾值回还，參數(shù)設(shè)為true則進(jìn)行深復(fù)制，會(huì)復(fù)制nodeA節(jié)點(diǎn)及其整個(gè)子樹叹洲；參數(shù)為false進(jìn)行淺復(fù)制柠硕，只復(fù)制nodeA節(jié)點(diǎn)；
ps:cloneNode()并不復(fù)制js屬性运提，但I(xiàn)E會(huì)復(fù)制相關(guān)事件處理程序
- 替換節(jié)點(diǎn)
4 替換節(jié)點(diǎn) replaceChild(newNode, oldNode)
栗子：oldNode.parentNode.replaceChild(newNode, oldNode);
- 移除節(jié)點(diǎn)
5 移除節(jié)點(diǎn) removeChild(nodeA)
栗子：nodeA.parentNode.removeChild(nodeA);
- 查找節(jié)點(diǎn)-遍歷
6 查找結(jié)點(diǎn)從某種程度上來說（除了之前介紹的通過DOM的常規(guī)屬性來找）應(yīng)該就是遍歷了吧
6.0 NodeIterator類型和TreeWalker類型（“DOM 2級(jí)遍歷和范圍”模塊中定義的）
6.1 NodeIterator
6.1.1創(chuàng)建：var aNodeIterator = document.createNodeIterator(root蝗柔，whatToShow, filter, false)
6.1.2方法：aNodeIterator.nextNode()最先指向root,然后隨遍歷改變，即向前遍歷的前方前進(jìn)一步
還有一個(gè)preciousNode(),指向遍歷的前一個(gè)節(jié)點(diǎn)民泵。
6.1.3參數(shù)：
root:遍歷開始的根節(jié)點(diǎn)
whatToShow:想要訪問的節(jié)點(diǎn)類型癣丧，如： NodeFilter.SHOW_ELEMENT表示元素節(jié)點(diǎn)類型
filter:一個(gè)表示拒絕還是接受的某種節(jié)點(diǎn)的函數(shù)(例：filterA)，或者一個(gè)包含acceptNode方法的NodeFilter對(duì)象(例：filterB)栈妆，或者為空（只讓whatToShow參數(shù)去過濾）胁编。
filterA: 函數(shù)厢钧，過濾掉不是標(biāo)簽不是div的所有元素節(jié)點(diǎn)
var filterA = function(node){
return node.tagName.toLowerCase() == 'div' ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
}
filterB: 對(duì)象
var filterB = {
acceptNode: function(node){
return node.tagName.toLowerCase() == 'div' ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
}
}
6.2 TreeWalker
6.2.1創(chuàng)建：var aTreeWalker= document.createTreeWalker(root，whatToShow, filter, false)
6.2.2和NodeIterator的不同：
filter返回的NodeFilter.FILTER_REJECT會(huì)跳過遍歷中之后的整個(gè)子樹掏呼，而在NodeIterator是和NodeFilter.FILTER_SKIP一樣跳過當(dāng)前結(jié)點(diǎn)坏快。
TreeWalker可以通過下列方法在DOM延任何方向移動(dòng)：
parentNode()//遍歷到當(dāng)前結(jié)點(diǎn)的父節(jié)點(diǎn)
firstChild()
lastChild()
nextSibling()
previousSibling()
