创建dom 碎片容器操作的dom的性能复制删除替换元素

最新推荐文章于 2023-02-09 15:59:40 发布

SpringYoungYu

最新推荐文章于 2023-02-09 15:59:40 发布

阅读量244

点赞数

文章标签： js dom

本文链接：https://blog.csdn.net/qq_44917015/article/details/111650347

版权

DOM操作性能优化 documentFragment 元素复制渲染树

关键词由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="div0">
        <div>123123</div>
    </div>
    <!-- <ul></ul> -->
    <script>
        // 创建内容
        // appendchild 追加尾部
        // insertbefore 插入什么的前面

        // 插入到第一个字节点 第一个子元素还不够前面 
        // 一般来说 第一个子元素前面还有很多子节点 
        //  或者说没有第一个子元素 也就是html标签 但是一般会有子节点了
        // var div = document.createElement("div");
        // document.body.appendChild(div);
        // div.textContent = "qweqwe"
        // var span = document.createElement("span");
        // span.textContent = "asdasd"
        // span.style.color = "green"
        // console.log( div.childNodes )
        // console.log( div.children )
        // div.insertBefore(span,div.firstChild)//插入到第一个子节点之前 肯定能插入到最前面
        // var p = document.createElement("p")
        // p.textContent = "p标签"
        // div.insertBefore( p, div.firstElementChild)//现在有标签子元素了 所以就可以插入前面了

        // 将一个元素插入到div0的前面
        //  var span = document.createElement("span"); // 这是创建元素节点
        // span.textContent = "asdasd"
        // div0.parentElement.insertBefore(span,div0)//获取div0的父容器 插入父容器内部元素之前
         // 将一个元素插入到div0的后面
        //  div0.parentElement.insertBefore(span,div0.nextElementSibling)//获取div0的父容器 插入父容器内部元素之后的兄弟元素之前；

        // var div0 = document.getElementById("div0")
        // // 创建文本节点 是一个文本节点对象
        // var txt = document.createTextNode("好滚滚滚")
        // div0.insertBefore(txt,div0.firstElementChild)

        var ul = document.createElement("ul")
        for( var i=0;i<50;i++ ){
            var li = document.createElement('li')
            li.textContent = i
            ul.appendChild(li)//没有在界面上 都在内存中 在页面上还没有创建好
            // 在页面上创建好的就不可以了
        }
        document.body.appendChild(ul)//最后插入进去 就进行一次dom操作

        // dom元素 是由 css树  和  dom树 组成的
        // 合成了一支渲染树 render tree
        // dom树 css树 合成了一支 渲染树
        // 太消耗性能

        // 需求 在body中创建50个div body已经存在 如何创建？
        // 可以创建一个碎片容器 进行包裹 类似于template 一个模板 在页面中就不见了？
        // 碎片会消失 
        var parent = document.createDocumentFragment()//创建一个碎片容器
        for(var i = 0;i<50;i++){
            var div = document.createElement("div")
            parent.appendChild(div)
        }
        document.body.appendChild(parent)
     </script>
</body>
</html>


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="div0"></div>
    <script>
        var div = document.createElement("div")
        div.textContent = "123"
        var div0 = document.getElementById('div0')
        document.body.appendChild(div)
        // 复制元素
        // var div1 = div.cloneNode(false)//深度复制 浅复制 不复制内部的内容
        var div1 = div.cloneNode(true)//深度复制 深复制 复制内部的内容
        div0.appendChild(div1)
        
        // 删除元素
        // div0.remove() //自己删除自己 只是从dom树上消失 还在内存中
        // document.body.removeChild(div0)//父容器删除子元素
        
        // 删除所有元素
        // document.body.innerHTML = ""

        // document.body.appendChild(div0)

        // div0 = null; // 这样才算完全消失 销毁对象 在内存中销毁

        var div2 = document.createElement("div")
        div2.textContent = "didididiv2"
        // 还有最后一个替换元素 replaceChild(新的元素, 要被替换的元素)
        document.body.replaceChild(div2,div);
    </script>
</body>
</html>