DOM复习Day3———添加和删除

今日复习内容：元素的添加和删除

1.添加：可分为3步：

     ①创建一个空元素：var a =document.createElement("a")

   注意：只能用document调用

    ②给新元素添加内容或属性

例如： <a   href="www.baidu.com"></a>

              a.innerHTML="click  Me"

但是，这样在页面中仍然看不见，因为新创建的元素还未挂载到DOM树上，排版引擎和绘图引擎未能得到新添加的元素，所以没有普、重排重绘。所以，我们先要把新元素挂载到dom树上

      ③将新元素挂载到DOM树上

            --1.将新元素追加到父元素下面的所有子元素的末尾

                     父元素.appendChild(新元素)

             --2.将新元素插到某个子元素之前

                      父元素.insetBefore(新元素，被插元素)

             --3.用新元素替换某个旧元素

                         父元素.replaceChild(新元素，被替换元素)

注意啦！！！将新元素挂载到DOM树上时，都要先找到它添加位置的父元素，由父元素调用函数添加子元素

              但是不能频繁的添加，操作DOM树。因为，只要操作一次，系统就要重排重绘，这样容易引起闪屏

正确的做法是酱紫的：（优化）

  1.如果同时添加父元素和子元素，先将子元素添加到父元素上，在一次性将父元素整体挂载到DOM树上，这样系统只需要重排重绘一次

  2.如果父元素已经在页面上了，需要添加多个平级子元素。先创建一个文档片段充当父元素，将多个子元素添加到文档片段上，再将文档片段一次性挂载到DOM树上

   辣么啥玩意是文档片段呢？？？

文档片段是内存中临时保存多个变量的虚拟父元素，不用担心它会影响页面效果，等将多个子元素挂载到dom树上时，它便功成身退的自动释放了，只留身后名！

2.删除

父元素.removeChlid(被移除元素)

明日预告

           -------常用 HTML DOM对象