counter
counter

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

 

 

 

posted @ 2012-07-12 19:07  bfy  阅读(634)  评论(0)    收藏  举报