原生JS的操作 - 黑马程序员技术交流社区

[JavaScript] 纯文本查看 复制代码

/**

*对DOM的操作次数越多，性能消耗也就越大。像这样的循环添加节点，循环了多少次，就对

*DOM操作了多少次，性能消耗明显是不划算的。我们就会想，能否把要插入的节点进行打包，然后一次性

*添加呢？如果可以的话，那就只对DOM做了一次操作了。要实现打包，这就要用到我们的主角 

*createDocumentFragment

*/

//createdocumentfragment()方法创建了一虚拟的节点对象，节点对象包含所有属性和方法。

// 获取页面的ul

var  element  \=  document.getElementById('ul');

// 创建一个document.createDocumentFragment()

//

var  fragment  \=  document.createDocumentFragment();

var  browsers  \= \['Firefox',  'Chrome',  'Opera',

'Safari',  'Internet Explorer'\];

browsers.forEach(function  (browser)  {

var  li  \=  document.createElement('li');

li.textContent  \=  browser;

fragment.appendChild(li);　　// 此处往文档片段插入子节点，不会引起回流 （相当于打包操作）

});

element.appendChild(fragment);　　// 将打包好的文档片段插入ul节点，只做了一次操作

[JavaScript] 纯文本查看 复制代码

2.  createElement()   //创建一个具体的元素

let box = document.getElementById('box');

box.appendChild(document.createElement('span'));

3.  createTextNode()   //创建一个文本节点

let box = document.getElementById('box');

box.appendChild(document.createTextNode("我是文本"));