JS-节点的深浅度复制

66 阅读 0 评论 44 点赞

我是靠谱客的博主迷人手链，最近开发中收集的这篇文章主要介绍JS-节点的深浅度复制，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

   cloneNode()方法可以复制一个节点，该方法能够给节点创建一个副本。
   var ele = node.cloneNode(deep);
       deep是一个逻辑值：
           参数值为true时，复制的节点将包含多有子节点内容；
           参数值为false时，赋值的节点仅包含指定对象本身，不包含任何子节点。

<body>
    <button>复制</button>
    <button>深度复制</button>
    <button>删除节点</button>
    <hr>
    <select class="choices">
        <option value="">请选择数字</option>
        <option value="">1</option>
        <option value="">2</option>
        <option value="">3</option>
        <option value="">4</option>
        <option value="">5</option>
    </select>
    <script>
         var choices = document.querySelector('.choices')
         var btn = document.querySelectorAll('button')
         var options = document.querySelectorAll('option')
         var body = document.body
         
         btn[0].onclick = function(){
        // choices.children[0].cloneNode(false) 浅度复制select里的节点  
        // choices.appendChild 复制完后再放进父节点select
            choices.appendChild(choices.children[0].cloneNode(false))
            console.log(body);
         }
         btn[1].onclick = function(){
         // choices.children[0].cloneNode(false) 深度复制select里的节点  
         // choices.appendChild 复制完后再放进父节点select
            choices.appendChild(choices.children[5].cloneNode(true))
            console.log(body);
         }
        // 删除指定节点
         btn[2].onclick = function(){
            choices.removeChild(choices.children[4])
         }

    </script>

</body>