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

时间：2023-12-12 22:17:38

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

以上内容参考自：javascript高级程序设计

相关文章