浅谈js中节点的浅拷贝和深拷贝

最新推荐文章于 2022-12-17 10:07:27 发布
最新推荐文章于 2022-12-17 10:07:27 发布
阅读量281 收藏
点赞数
分类专栏： 前端技术 文章标签： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41591368/article/details/107192575
版权

浅拷贝

node.cloneNode();括号内为空或者false时为浅拷贝
效果：只复制标签不复制标签的内容

深拷贝

node.cloneNode();括号内true时为深拷贝
效果：复制标签和标签的内容

代码对比和效果截图

<body>
        <ul>
            <li>1</li>
            <li>2</li>
        </ul>
        <script>
                var ul = document.querySelector('ul')
                // 浅拷贝
                var copyLi = ul.children[0].cloneNode();
                // 深拷贝
                var depthLi = ul.children[0].cloneNode(true);
                ul.appendChild(copyLi)
                ul.appendChild(depthLi)

        </script>
    
</body>

在这里插入图片描述

kinjaze
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
复制（克隆）节点node . cloneNode ( )深拷贝浅拷贝
leechoy
08-31 5383
node.cloneNode ()方法返回调用该方法的节点的-一个副本。也称为克隆节点/拷贝节点 如果括号参数为空或者为false,则是浅拷贝，即只克隆复制节点本身，不克隆里面的子节点。 如果括号参数为true，则是深度拷贝，会复制节点本身以及里面所有的子节点。 ①浅拷贝 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>clonetest</t
DOM节点高阶操作（初识深浅拷贝）
世界和我们都不该止步于此
04-15 804
目录 一.创建节点 二.添加节点 三.删除节点 四.克隆节点 五.这样也可以动态创建节点元素？ 六.DOM小结 鼠标事件： 一.创建节点 document.createElement('tagName') tagName是我们想要创建的HTML元素，这些元素原本不存在，是动态生成的 所以也叫做动态创建元素节点，效果就像我们CSS中的伪元素（::after）创建的元素一样，可以却有本质的不同，相同点只是都能够创建一个新的元素，DOM操作更加的灵活可控 当然，我们创建了这个...
JavaScript-DOM节点操作深拷贝浅拷贝递归
Abby_zzy的博客
03-15 2013
基本数据类型和引用数据类型 基本数据类型：number，String，Boolean，null，undefined 引用数据类型：object，array，function 基本数据类型和引用数据类型的区别 1：值是否可变 .基本类型的值是不可变得： .引用类型的值是可变的 2：数据的比较 .基本类型的比较是值的比较—只有在它们的值相等的时候它们才相等 如果他们的类型不相等；在进行比较的过程中；=...
JS-节点的深浅度复制
weixin_45959965的博客
12-17 534
节点的深浅度复制
（js）js元素节点的深拷贝和浅拷贝
wlijun_0808的博客
12-20 635
代码： node.cloneNode() node.cloneNode() 方法返回调用该方法的节点的一个副本。 也称为克隆节点/拷贝节点 注意： 如果括号参数为空或者为 false ，则是浅拷贝，即只克隆复制节点本身，不克隆里面的子节点。 如果括号参数为 true ，则是深度拷贝，会复制节点本身以及里面所有的子节点。 案例： <ul> <li>1</li> <li>2</li> <li&g
浅谈深拷贝和浅拷贝
博客
02-23 121
深拷贝是指，完全复制一个，一模一样的 浅拷贝是指，只是指向内存地址 见下图：
vue对象深拷贝_浅谈深拷贝和浅拷贝
weixin_42504214的博客
12-30 2526
深拷贝和浅拷贝说起深拷贝和浅拷贝，首先我们来看两个栗子// 栗子1var a = 1,b=a;console.log(a);console.log(b)b = 2;console.log(a);console.log(b)// 栗子2var obj1 = {x: 1, y: 2}, obj2 = obj1;console.log(obj1) //{x: 1, y: 2}console.log(ob...
浅谈超节点P2P网络中有效的缓存方法
01-19
　在P2P软件中，每个用户就是一个节点，数据传输通过节点进行，不需要很多的中央服务器，但为了保证数据传输质量，P2P软件会自动分析每个节点的硬件资源，让有较大带宽和高速计算机担任它的“超级节
浅谈Javascript中的12种DOM节点类型
10-21
DOM是javascript操作网页的接口，全称为文档对象模型(Document Object Model)。本文将主要说明DOM节点类型，有需要的可以参考借鉴。
浅谈zigbee的无线传感器网络节点
01-19
这一名称于蜜蜂的八字舞，由于蜜蜂(bee)是靠飞翔和“嗡嗡”(zig)地抖动翅膀的“舞蹈”来与同伴传递花粉所在方位信息，也就是说蜜蜂依靠这样的方式构成了群体中的通信网络。其特点是近距离、低复杂度、自组织、低功耗...
浅谈JavaScript语言中文档节点访问技术.pdf
最新发布
01-02
浅谈JavaScript语言中文档节点访问技术 在本文中，我们将探讨JavaScript语言中文档节点访问技术的相关知识点。节点访问是JavaScript语言中的一种基本技术，用于访问和操作HTML文档中的元素。下面是节点访问技术的...
浅谈SN中的数据传输瓶颈
01-19
无线传感器网络（Wireless Sensor Network, WSN）就是由部署在监测区域内大量的廉价微型传感器节点组成，通过无线通信方式形成的一个多跳的自组织的网络系统，其目的是协作地感知、采集和处理网络覆盖区域中被感知...
深浅拷贝详解
weixin_42617262的博客
04-23 560
深浅拷贝 Object类clone()方法 深浅拷贝概念(重要) 深浅拷贝实现方式 我们首先来学习一下Object类中的clone()方法 //我们可以看到，clone()方法为本地方法，且使用该方法可能会抛出CloneNotSupportedException异常 protected native Object clone() throws CloneNotSupportedExceptio...
js 深浅拷贝
barbed的博客
09-20 79
深拷贝就是复制内部内容 浅拷贝就是复制内存地址 var obj = {}; //浅拷贝 -->引用传递(浅拷贝就是赋值，将钥匙复制一份) var o = obj; //深拷贝 -->内部内容复制一份（将房子复制一份） //方法一 var str = JSON.stringify(obj); var obj3 = JSON.parse(str); //方法二 var obj4 = {}; //遍历obj对象，将obj对象的内容复制到obj4中。 for (var key in obj) {
Vue中点点点(...)用法
qq_45977832的博客
04-20 1817
Vue中点点点(…)用法 官方文档说明: 这个是扩展运算符。 扩展语法。对数组和对象而言，就是将运算符后面的变量里东西每一项拆下来。 这个东西可以在函数定义的地方使用，比如使用func(…args)将函数传入的参数都放到args数组里。 除此之外： 普通用法： 1.连接数组 let a = [{ name1: "1" }, { name2: "2" }, { name3: "4" }, { name4: "5" }]; let b = [{ name7: "7" }, { name5: "5
es6语法... 点点点语法 单层深拷贝，多层浅拷贝
SanOrintea的博客
01-11 266
当拷贝[1,2,34,5]这样的数据是深拷贝 当拷贝[{a:1}]这样的数据是浅拷贝
JavaScript常用方法集合
日常笔记/总结/系列知识梳理
02-25 5905
JavaScript是一种广泛使用的编程语言，主要用于Web开发。它是一种脚本语言，这意味着它不需要像编译语言那样预先编译，而是在运行时解释和执行。JavaScript可以直接在浏览器中运行，这使得它在前端开发中特别重要，可以用于动态生成和更改网页内容、响应用户交互、发送和接收数据等。
通过正则表达式去除字符串中多余的空格
qq_41591368的博客
10-05 4357
话不多说直接上源码 function reverseStr (str) { return str.match(/[^\s]+/g).join(' '); } console.log(reverseStr("this is my way"))//this is my way 实现的思路 通过正则表达式捕获所有的非空的数据存到数组中，然后通过join方法将所有的数组元素以空格连接即可取除多余的空格。match中的正则的意思是，出现一次或多次的任意一个非空格数据全局匹配 match的基本使用 可
Linux中跨节点拷贝的命令
09-02
在Linux中，可以使用以下命令进行跨节点拷贝： 1. `scp` 命令：用于在两台 Linux 主机之间复制文件和目录。 ```bash scp [options] source_file destination_file ``` 其中，source_file 是要复制的源文件或目录...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值