js中迭代元素特性与DOM中的DocumentFragment类型

JS中迭代元素特性


　　在需要将DOM结构序列化为XML或者HTML字符串时，多数都会涉及遍历元素的特性，这个时候attributes属性就可以派上用场。


　　以下代码展示了如何迭代元素的每一个特性，然后将他们构造成 name = "value"  name = "value" 这样的字符串格式。

1. function outputAttributes(element) 
   
2. {
   
3.     var pairs = new Array();
   
4.     for(var i=0, len=element.attributes.length; i < len; i++)
   
5.     {
   
6.         var attrName = element.attributes[i].nodeName;
   
7.         var attrValue = element.attributes[i].nodeValue;
   
8.         pairs.push(attrName + "=\"" + attrValue + "\"");
   
9.     }
   
10.     return pairs.join(" ");
    
11. }

复制代码

　　通过attributes.length属性，for循环会遍历每个特性，将特性的名称和值输出为字符串。这个函数使用了一个数组保存名值对，最后再以空格为分隔符将它们拼接起来（这是序列化长字符串一种常用的技巧）。


　　关于上面代码运行结果，有两点声明：

• 针对attributes对象中的特性，不同浏览器返回的顺序不同，这些特性在XML中或HTML代码中出现的先后顺序，不一定与它们出现在attributes对象中的顺序一致。
• IE7及更早的版本中会返回HTML元素中所有可能的特性，包括没有指定的特性，也可以说返回100多个特性的情况也是可以有的。
  

　　针对IE7及更早的版本中存在的问题，可以对上面函数加以改进，让它只返回特定的特性。每个特性节点都有一个specified的属性，这个属性如果为true，意味着要么在HTML中指定了相应的特性，要么通过setAttribute() 方法设置了该特性，在IE中，所有未设置的特性的该属性都为false，而在其他浏览器中根本不会为这类特性生成对应的特性节点，因此，在这些浏览器中，任何特性节点的specified的值始终为true。


　　改进后的代码如下：

1. function outputAttributes(element) 
   
2. {
   
3.     var pairs = new Array();
   
4.     for(var i=0, len=element.attributes.length; i < len; i++)
   
5.     {
   
6.         var attrName = element.attributes[i].nodeName;
   
7.         var attrValue = element.attributes[i].nodeValue;
   
8.         if (element.attributes[i].specified)
   
9.         {
   
10.             pairs.push(attrName + "=\"" + attrValue + "\"");
    
11.         }
    
12.         
    
13.     }
    
14.     return pairs.join(" ");
    
15. }

复制代码

这样改进后的函数可以确保即使在IE7及更早的版本中，也会返回指定的特性。


DOM中的DocumentFragment类型


先来看一个HTML例子：

1. <ul id="mylist"></ul>

复制代码

　　当我们想为这个<ul>元素添加3个列表项，如果逐个地添加列表项，将会导致浏览器反复渲染（呈现）新的信息，为了避免这个问题，可以使用一个文档片段（document fragment）来保存创建的列表项，然后再一次性的将三个列表项添加到文档中。


　　DOM规定文档片段是一种“轻量级”的文档，可以包含和控制节点，但不会像完整文档那样占用额外的资源，也就是不能把文档片段直接添加到文档中，不过可以把它作为一个“仓库”使用，在里面保存将来可能添加到文档中的节点，比如上例中的三个列表项。


　　文档片段继承了Node的所有方法，通常用于执行那些针对文档的DOM操作。如果将文档中的节点添加到文档片段中，就会从文档树中移除该节点，也不会从浏览器中再看到该节点。添加到文档片段中的新节点也不再属于文档树。可以通过 appendChild() 或者 insetBefore() 将文档片段中内容添加到文档中。在将文档片段作为参数传递给这两个方法时，实际上只会将文档片段内部的节点添加到文档树中的相应位置，而文档片段本身是不可能成为文档树的一部分。


　　要想创建一个 文档片段，可以使用document.createDocumentFragment()方法。如下：

1. var fragment = document.createDocumentFragment();

复制代码

　　利用文档片段来解决上述的例子：

1. var fragment = document.createDocumentFragment();  //创建文档片段
   
2. var ul = document.getElementById("myLisst");  
   
3. var li = null;
   
4. 
   
5. for(var i=0; i < 3; i++){
   
6.     li = document.createElement("li");     //创建文本节点
   
7.     li.appendChild(document.createTextNode("Item "+(i+1)));    //把文本节点添加到<li>元素 
   
8.     fragment.appendChild(li)               //使用appendChild()将li添加到文本片段中
   
9. }
   
10. ul.appendChild(fragment); //最后一次性把文档片段中的所有子节点转移到<ul>中

复制代码