js中迭代元素特性与DOM中的DocumentFragment类型 笔记
js中迭代元素特性与DOM中的DocumentFragment类型 笔记
JS中迭代元素特性
在需要将DOM结构序列化为xml或者HTML字符串时，多数都会涉及遍历元素的特性，这个时候attributes属性就可以派上用场。
以下代码展示了如何迭代元素的每一个特性，然后将他们构造成 name = "value" name = "value" 这样的字符串格式。
function outputAttributes(element) { var pairs = new Array(); for(var i=0, len=element.attributes.length; i < len; i++) { var attrName = element.attributes[i].nodeName; var attrValue = element.attributes[i].nodeValue; pairs.push(attrName + "=\"" + attrValue + "\""); } return pairs.join(" ");}
通过attributes.length属性，for循环会遍历每个特性，将特性的名称和值输出为字符串。这个函数使用了一个数组保存名值对，最后再以空格为分隔符将它们拼接起来（这是序列化长字符串一种常用的技巧）。
关于上面代码运行结果，有两点声明：
- 针对attributes对象中的特性，不同浏览器返回的顺序不同，这些特性在XML中或HTML代码中出现的先后顺序，不一定与它们出现在attributes对象中的顺序一致。
- IE7及更早的版本中会返回HTML元素中所有可能的特性，包括没有指定的特性，也可以说返回100多个特性的情况也是可以有的。
针对IE7及更早的版本中存在的问题，可以对上面函数加以改进，让它只返回特定的特性。每个特性节点都有一个specified的属性，这个属性如果为true，意味着要么在HTML中指定了相应的特性，要么通过setAttribute() 方法设置了该特性，在IE中，所有未设置的特性的该属性都为false，而在其他浏览器中根本不会为这类特性生成对应的特性节点，因此，在这些浏览器中，任何特性节点的specified的值始终为true。
改进后的代码如下：
function outputAttributes(element) { var pairs = new Array(); for(var i=0, len=element.attributes.length; i < len; i++) { var attrName = element.attributes[i].nodeName; var attrValue = element.attributes[i].nodeValue; if (element.attributes[i].specified) { pairs.push(attrName + "=\"" + attrValue + "\""); } } return pairs.join(" ");}
这样改进后的函数可以确保即使在IE7及更早的版本中，也会返回指定的特性。
DOM中的DocumentFragment类型
先来看一个HTML例子：
<ul id="mylist"></ul>
当我们想为这个<ul>元素添加3个列表项，如果逐个地添加列表项，将会导致浏览器反复渲染（呈现）新的信息，为了避免这个问题，可以使用一个文档片段（document fragment）来保存创建的列表项，然后再一次性的将三个列表项添加到文档中。
DOM规定文档片段是一种“轻量级”的文档，可以包含和控制节点，但不会像完整文档那样占用额外的资源，也就是不能把文档片段直接添加到文档中，不过可以把它作为一个“仓库”使用，在里面保存将来可能添加到文档中的节点，比如上例中的三个列表项。
文档片段继承了Node的所有方法，通常用于执行那些针对文档的DOM操作。如果将文档中的节点添加到文档片段中，就会从文档树中移除该节点，也不会从浏览器中再看到该节点。添加到文档片段中的新节点也不再属于文档树。可以通过 appendChild() 或者 insetBefore() 将文档片段中内容添加到文档中。在将文档片段作为参数传递给这两个方法时，实际上只会将文档片段内部的节点添加到文档树中的相应位置，而文档片段本身是不可能成为文档树的一部分。
要想创建一个 文档片段，可以使用document.createDocumentFragment()方法。如下：
var fragment = document.createDocumentFragment();
利用文档片段来解决上述的例子：
var fragment = document.createDocumentFragment(); //创建文档片段var ul = document.getElementById("myLisst"); var li = null;for(var i=0; i < 3; i++){ li = document.createElement("li"); //创建文本节点 li.appendChild(document.createTextNode("Item "+(i+1))); //把文本节点添加到<li>元素 fragment.appendChild(li) //使用appendChild()将li添加到文本片段中
} ul.appendChild(fragment); //最后一次性把文档片段中的所有子节点转移到<ul>中