游客

标题:js createDocumentFragment：更快捷的操作DOM的途径 代码高亮库就是用的这个
正文:
我相信很少人知道JavaScript里还有这样一个很有用的东西：DocumentFragment。程序员可以使用DocumentFragment将一批子元素添加到任何类似node的父节点上，对这批子元素的操作不需要一个真正的根节点。程序员可以不依赖可见的DOM来构造一个DOM结构，而效率高是它真正的优势，试验表明，它比直接操作DOM快70%。下面我们就来看看DocumentFragments是如何使用的！DocumentFragment例子我们要使用UL元素，然后往里面插入LI元素：<ul id="list"></ul>DOM插入和修改是一个很费力耗时的工作，所以，这样的交互越少越好。这就是DocumentFragment发挥功用的地方了。第一步我们先创建一个DocumentFragment：var frag = document.createDocumentFragment();DocumentFragment实际上像一个伪DOM节点，在这个例子里你可以把它当成虚拟的UL元素。现在，我们开始往里面加入元素：for(var x = 0; x 10; x++) {var li = document.createElement("li"); li.innerHTML = "List item " + x; frag.appendChild(li);}往DocumentFragment里添加元素就跟你操作普通的DOM节点一样。一旦页面DOM加载完成，你可以访问了，你就可以把DocumentFragement挂到它的父节点上：listNode.appendChild(frag);使用DocumentFragement要比直接对DOM节点操作要快的多，而且程序员可以利用新DOM节点来操作DocumentFragement，这样比操作整个页面DOM要更容易。所以，当需要进行大量DOM操作时，尽量使用DocumentFragement，它会让你的应用变的更快！var list = document.getElementById('list2'),
[<<][[1]][2][>>]

查看评论(0)
发表评论



首页