javascript CreateDocumentFrament 创建NodeIterator对象,TreeWalker对象
1.当向document添加大量数据时，逐个添加的话，比较麻烦，创建一个文档碎片把所有的结点附加其上。然后把文档碎片的内容一次添加到需要的位置。
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript">
function add() {
// var areaTxt = ["a","b","c"];
var areaTxt=new Array("a","b","c");
//创建文档碎片
var fra= document.createDocumentFragment();
for(var i=0;i<areaTxt.length;i++)
{
//创建元素
var addps=document.createElement("p");
//创建文本结点
var txt= document.createTextNode(areaTxt[i]);
//文本附加到元素上
addps.appendChild(txt);
//元素附加到文档碎片上
fra.appendChild(addps);
}
//文档碎片的子节点 附加到指定位置 不是附加文档碎片节点本身
document.getElementById("addp").appendChild(fra);
// document.body.appendChild(fra);
}
</script>
</head>
<body onload="add()">
<form id="form1" runat="server">
<div>
<asp:Button ID="btn" Text="点击" runat="server" />
</div>
<div id="addp"></div>
</form>
</body>
</html>
2. ToDo replacechild(被添加的结点，被替换的结点)，
3.创建NodeIterator对象，对DOM树进行深度优先搜索
View Code
1 <html xmlns="http://www.w3.org/1999/xhtml"> 2 <head runat="server"> 3 <title></title> 4 <script type="text/javascript"> 5 function add() { 6 7 var interator = null; 8 var divs = document.getElementById("div1"); 9 10 var acceptInter = new Object; 11 acceptInter.acceptNode = function (Onode) { 12 return Onode.tagName == "p" ? NodeFilter.FILTER_REJECT : NodeFilter.FILTER_ACCEPT; 13 } 14 interator = document.createNodeIterator(divs, NodeFilter.SHOW_ELEMENT, acceptInter, false); 15 var outputs = document.getElementById("txt"); 16 var ointer = interator.nextNode(); 17 while (ointer) { 18 outputs.value += ointer.tagName + "\n"; 19 // div2.appendChild(ointer); 20 ointer = interator.nextNode(); 21 22 23 24 } 25 26 } 27 28 </script> 29 </head> 30 <body onload="add()"> 31 <form id="form1" runat="server"> 32 <div> 33 <asp:Button ID="btn" Text="点击" runat="server" OnClientClick="add()" /> 34 </div> 35 <div id="addp"> 36 </div> 37 <div id="div1"> 38 <p> 39 Hello<b>word!</b></p> 40 <ul> 41 <li>1</li> 42 <li>2</li> 43 <li>3</li> 44 </ul> 45 </div> 46 <textarea id="txt" cols="5" rows="10" ></textarea> 47 <div id="div2"></div> 48 </form> 49 </body> 50 </html>
4.创建TreeWalker对象与NodeInterator类似，参数也一致，对DOM树比较了解，局部遍历。如果不知道结构的话，NodeInterator更合适
添加了一些遍历方法：parentNode:当前节点的父节点，firstchild,lastchild,nextSibling:当前节点的下一个兄弟节点，previousSibling
