javascript 拷贝节点cloneNode()使用介绍

cloneNode(a)方法接受一个布尔值参数,表示是否深拷贝
true:表示执行深拷贝,复制本节点以及整个子节点树.
false:浅拷贝.只复制节点本身.
复制后返回的节点副本属于文档所有,但是并没有父节点.除非使用appendChild,insertChild(),replaceChild()将它添加到文档


代码如下:

<div id="guoDiv">
<span>1</span>
<span>2</span>
<span>3</span>
</div>
var oDiv = document.getElementById("guoDiv");
var deepList = oDiv.cloneNode(true); //拷贝子节点
alert(deepList.childNodes.length); //3或7(兼容性问题,所以结果不一样)
var showList = oDiv.cloneNode(false); //只拷贝当前元素的引用
alert(showList.childNodes.length); //0

赞 (0)

相关推荐

  • javascript 深拷贝

    我们先看一下浅复制的缺陷,不知多少人中过招呢? 复制代码 代码如下: var oOriginal = { memNum: 1, // number memStr: "I am a string", // string memObj: { test1: "Old value" // we'll test }, memArr: [ // array "a string", // string member of array { // object m

  • js 深拷贝函数

    function objectClone(obj,preventName){ if((typeof obj)=='object'){ var res=(!obj.sort)?{}:[]; for(var i in obj){ if(i!=preventName) res[i]=objectClone(obj[i],preventName); } return res; }else if((typeof obj)=='function'){ return (new obj()).construct

  • 浅谈JavaScript中面向对象的的深拷贝和浅拷贝

    理解深拷贝和浅拷贝之前需要弄懂一些基础概念,内存中存储的变量类型分为值类型和引用类型. 1.值类型赋值的存储特点, 将变量内的数据全部拷贝一份, 存储给新的变量. 例如:var num = 123 :var num1=num; 表示变量中存储的数字是 123.然后将数据拷贝一份,就是将 123 拷贝一份. 那么内存中有 2 个 数组;将拷贝数据赋值给 num2,其特点是在内存中有两个数据副本.这可以理解为浅拷贝. 2.引用类型的赋值. var o={name:'张三'}: var obj=o;

  • JS深度拷贝Object Array实例分析

    本文实例分析了JS深度拷贝Object Array.分享给大家供大家参考,具体如下: function cloneObj(o) { var isArray = o instanceof Array; var isObject = o instanceof Object; if (!isObject) return o; var n = (isArray ? [] : {}); for (var k in o) n[k] = cloneObj(o[k]); return n; } 遇到的问题 ty

  • JavaScript数组深拷贝和浅拷贝的两种方法

    例如这个例子: 复制代码 代码如下: var arr = ["One","Two","Three"]; var arrto = arr;arrto[1] = "test";document.writeln("数组的原始值:" + arr + "<br />");//Export:数组的原始值:One,test,Threedocument.writeln("数组的新值

  • 禁止拷贝网页内容的js代码

    复制代码 代码如下: <body oncontextmenu = "return false"> <body oncontextmenu = "return false" onselectstart = "return false">

  • javascript数组操作(创建、元素删除、数组的拷贝)

    1.数组的创建 复制代码 代码如下: var arrayObj = new Array(); //创建一个数组var arrayObj = new Array([size]); //创建一个数组并指定长度,注意不是上限,是长度var arrayObj = new Array([element0[, element1[, ...[, elementN]]]]); 创建一个数组并赋值 要说明的是,虽然第二种方法创建数组指定了长度,但实际上所有情况下数组都是变长的,也就是说即使指定了长度为5,仍然可以

  • Javascript 浅拷贝、深拷贝的实现代码

    什么是"clone"? 在实际编程过程中,我们常常要遇到这种情况:有一个对象A,在某一时刻A中已经包含了一些有效值,此时可能会需要一个和A完全相同新对象B,并且此后对B任何改动都不会影响到A中的值,也就是说,A与B是两个独立的对象,但B的初始值是由A对象确定的.在Java/javasript语言中,用简单的赋值语句是不能满足这种需求的.要满足这种需求虽然有很多途径,但实现clone()方法是其中最简单,也是最高效的手段,当然了 javascript语言中并没有此方法. 所以我特意写了两

  • jQuery深拷贝Json对象简单示例

    本文实例讲述了jQuery深拷贝Json对象的简单实现方法.分享给大家供大家参考,具体如下: var oldJson = { Name: 'quber', List: [1, 2, 3, 4], Obj: [ { name: 'qubernet', fun: function () { return 1; } }, { name: 'qubernet1', fun: function () { return 2; } } ] }; var newJson = $.extend(true, {},

  • javascript 拷贝节点cloneNode()使用介绍

    cloneNode(a)方法接受一个布尔值参数,表示是否深拷贝 true:表示执行深拷贝,复制本节点以及整个子节点树. false:浅拷贝.只复制节点本身. 复制后返回的节点副本属于文档所有,但是并没有父节点.除非使用appendChild,insertChild(),replaceChild()将它添加到文档 复制代码 代码如下: <div id="guoDiv"> <span>1</span> <span>2</span>

  • javascript移出节点removeChild()使用介绍

    removeChild(a)是用来删除文档中的已有元素 参数a:要移出的节点 复制代码 代码如下: <div id="guoDiv"> <span>1</span> <span>2</span> <span>3</span> </div> var oDiv = document.getElementById("guoDiv"); var firsChild = oDiv.

  • JavaScript DOM节点操作方法总结

    JavaScript DOM节点操作方法总结

    节点类型主要有三种:元素节点,属性节点和文本节点. 而对DOM的主要也就是围绕元素节点和属性节点的增删改查.下面就分别从对元素节点的操作和对属性节点的操作来介绍. 元素节点 查 在对DOM进行增删改之前,首先要找到对应的元素.具体的查找方法如下: getElementByID() // 得到单个节点 getElementsByTagName() // 得到节点数组 NodeList getElementsByName() // 得到节点数组 NodeList 同时还可以利用元素节点的属性获取它的

  • JavaScript可迭代对象详细介绍

    目录 1.迭代器 2.迭代器接口与可迭代对象 3.自定义可迭代对象 3.1.可迭代的Range对象 3.2.使用Generator函数作为迭代器接口 3.3.可迭代的List 3.3.可迭代的迭代器 4.可迭代对象的意义 5.使用可迭代对象 6.后记 1.迭代器 迭代器是借鉴C++等语言的概念,迭代器的原理就像指针一样,它指向数据集合中的某个元素,你可以获取它指向的元素,也可以移动它以获取其它元素.迭代器类似于数组中下标的拓展,各种数据结构,如链表(List).集合(Set).映射(Map)都有

  • JavaScript DOM节点操作实例小结(新建,删除HTML元素)

    JavaScript DOM节点操作实例小结(新建,删除HTML元素)

    本文实例讲述了JavaScript DOM节点操作方法.分享给大家供大家参考,具体如下: 使用DOM可以新建HTML元素,也可以删除已有的HTML元素. (一)新建元素: <script> //创建新的 <p> 元素 var newEle=document.createElement("p"); //创建文本节点 var node=document.createTextNode("这是使用Javascript创建的新段落."); //将文本节

  • JavaScript实现节点的删除与序号重建实例

    JavaScript实现节点的删除与序号重建实例

    本文实例讲述了JavaScript实现节点的删除与序号重建.分享给大家供大家参考.具体如下: 这里演示JavaScript节点的删除与重建方法,删除节点后,会自动重新建立节点,序号自动排列,比如删除当前的第3条数据后,第4条的序号会智能变为3,以此类推,保证序号不乱. 运行效果如下图所示: 删除前: 删除后: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ww

  • javascript运算符——位运算符全面介绍

    javascript运算符——位运算符全面介绍

    前面的话 位运算符是非常底层的运算,由于其很不直观,所以并不常用.但是,其速度极快,且合理使用能达到很好的效果.本文将介绍javascript中常常被忽视的运算符--位运算符 二进制表示 ECMAScript中的所有数值都以IEEE-754 64位格式存储,但位操作符并不直接操作64位的值,而是以32位带符号的整数进行运算的,并且返回值也是一个32位带符号的整数 这种位数转换使得在对特殊的NaN和Infinity值应用位操作时,这两个值都会被当成0来处理 如果对非数值应用位操作符,会先使用Num

  • JavaScript的function函数详细介绍

    JavaScript的function函数详细介绍

    通过函数来封装任意多条语句,而且可以在任何地方.任何时间调用执行. 而我们的JavaScript脚本语言比较特殊,相对于C语言,它的参数是不需要数据类型加持的.返回值return,我就不过多描述,他是和 C语言通的,如果没写他就会自动返回undefined function fun(x,y){ } //写成这样就可以声明一个函数 以我的理解他就是以对象的形式来传入参数,通过对象的各项属性值(引用类型的值),来作为我的实际参数, 例如我有以下做法: function fun(x, y) { //

  • JavaScript可视化与Echarts详细介绍

    JavaScript可视化与Echarts详细介绍

    目录 一.可视化介绍 二.可视化库介绍 三.Echarts Echarts引入和使用 了解基础配置 一.可视化介绍 可视化:将数据用图表展示出来,让数据更加直观.让数据特点更加突出 应用场景:营销数据.生产数据.用户数据 二.可视化库介绍 常见的数据可视化库: D3.js:目前 Web 端评价最高的 Javascript 可视化工具库(入手难) ECharts.js:百度出品的一个开源 Javascript 数据可视化库 Highcharts.js:国外的前端数据可视化库,非商用免费,被许多国外

  • JavaScript reduce方法使用方法介绍

    目录 1. reduce方法的使用 2. reduce数组的使用场景 2.1 扁平化数组 2.2 数组去重 2.3 计算数组最大/最小值 2.4 数组求和 2.5 计算数组中元素的出现次数 3. 操作对象 4. 使用reduce代替.filter().map() 5. 按顺序执行promise 6. 使用compose函数组合实现管道 1. reduce方法的使用 Array.prototype.reduce(callBack(previousValue, currentValue, curre

随机推荐