JS-节点的深浅度复制

吃不饱的小明同学

已于 2023-04-09 11:38:20 修改

阅读量539

点赞数

分类专栏： JS 文章标签： javascript 前端开发语言

于 2022-12-17 10:07:27 首次发布

本文链接：https://blog.csdn.net/weixin_45959965/article/details/128350764

版权

JS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

   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>