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

以你之姓@ 2022-08-05 15:14 129阅读 0赞

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>中

复制代码