黑马程序员技术交流社区

标题: 【面试题】怎样添加、移除、复制、创建、查找节点 [打印本页]

---

作者: 爱编码的J    时间: 2021-4-12 20:26
标题: 【面试题】怎样添加、移除、复制、创建、查找节点

添加

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

 createDocumentFragment()    //创建一个DOM片段

<div class='box'> 

    <ul id='ul' > </ul>

</div>

[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()   //创建一个具体的元素

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

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

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

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

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

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

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

添加 移出 替换 插入

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

4.  appendChild()  //添加子节点

5.  removeChild()  //删除子节点

6.  replaceChild()  //替换子节点

7.  insertBefore()  //在已有的子节点前插入一个新的子节点

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2