首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

DOM 节点的克隆与删除

无奈的开头         关于DOM节点操作,如果仅仅是根据标准API来操作,那是最简单不过的了。...但是现实中却哪有这么容易的问题让我们解决,其实不仅仅是节点的克隆与删除,节点的添加也是如此,而且添加节点需要考虑的情况更多,这里不详细讲解,只说明大概过程。        ...克隆节点,规范的API是cloneNode(boolean),boolean为true时进行深克隆。...但是legacy IE却有一个奇怪的bug,那就是通过该方法克隆的副本,却仍含有相关的事件处理函数和用户自定义属性,而且修改删除这些属性或者函数,会影响到源节点的属性。。。着实让人无语。...解决方案另辟蹊径,即可以通过获取副本的HTML字符串,重新构造一个DOM节点,这样根据字符串反系列化的副本就不会包含在js中额外操作的属性或者事件处理程序。

2K70
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    JSDOM

    DOM:document object model。文档对象模型。它主要由许多节点。而基于JS对象的一切视角,DOM核心是节点对象和操作方法的属性。从下面三方面来介绍DOM。...见导图: 二、DOM之CSS样式 对于这部分的内容,涉及到的也是CSS样式的获取和操作。...JS中提供了专门儿用于获取元素尺寸和大小的方法。 实际大小:针对于元素的实际大小。主要与四个因素有关,padding。margin,border,scroll。而以下提供的几种方法,针对于不同的因素。...会有不同的结果,仅依据需求使用就可以 周边大小: 小结:DOMJS学习的一个核心内容。...当中涉及到的元素节点的属性和基本操作也是前台页面中最重要的组成,通过这些,才干使JS中基于对象的思想发挥作用。能够说,B/S UI页面中的一切都是建立在这些元素的基础之上的。

    3.2K20

    JS完美收官之浅克隆和深克隆

    1996年7月5日,在英国爱丁堡市罗斯林研究所出生了一只克隆羊多莉,克隆英文名"clone",clone起源于希腊文"klone",也称为无性繁殖,克隆是生物体通过体细胞进行无性繁殖,最终形成基因完全相同的后代...,多莉与多塞特母绵羊具有完全相同的外貌,而我们程序中的克隆跟这类似,就是把一个对象中的属性复制一份放到另一个对象中。...浅克隆 什么是浅克隆?浅克隆就是当我把obj{}对象里面的所有属性拷贝到obj1{}中后,然后我分别改变对象里面的变量,原始值互不影响,引用值一个改变,另一个跟着变。...return target; } clone(obj, obj1); 当引用值修改时: 从执行结果可以看出修改原始值时互不影响,一旦修改引用值时,一个改,另一个跟着变,这就是浅克隆...深克隆(主要) 那什么是深克隆呢?深克隆就是修改引用值时,互不影响,你改我不变。

    1.3K20

    jsDOM理解

    arguments.callee,func.caller,变量赋值前必须声 明,局部this必须被赋值 (Person.call(null/undefined) 赋值什么就是什么),拒绝重复属性和参数 复制代码 DOM...什么是DOM 1.DOM — > Document Object Model 2.DOM定义了表示和修改文档所需的方法。...DOM对象即为宿主对象, 由浏览器厂商定义,用来操作html和xml功能的一类对象的集合。 也有人称DOM是对HTML以及XML的标准编程接口。...复制代码 DOM基本操作 1.对节点的增删改查 查看元素节点 document代表整个文档 document.getElementById() //元素id 在Ie8以下的浏览器, 不区分id大小写,而且也返回匹配...querySelector() // css选择器 在ie7和ie7以下的版本中没有,非实时 .querySelectorAll() // css选择器 在ie7和ie7以下的版本中没有,非实时 复制代码 DOM

    4.2K30

    JS DOM学习笔记

    button";//input标签类型为按钮 btn.value = "提交"; //设置按钮值 document.appendChild(btn); //将按钮添加到文档中 13、不同浏览器中对DOM...支持的方法不一样 获取网页中那个元素触发了事件,在IE中使用srcElement; 在FireFox里使用target 使用Dom获取和更改网页标签元素内文本,在IE中使用innerText; 在FireFox...textContent 动态为网页或元素绑定事件,在IE中绑定事件的方法是attachEvent; 在FireFox中绑定事件的方法是addEventListener jQuery之类的框架进行了封装,解决了不同浏览器上Dom...的不同 14、jQuery的ready和Dom的onload的区别:window.onload只能注册一次,是在所有的Dom元素创建完毕、图片、CSS都加载完毕后才被触发;而jQuery的ready则是在...Dom元素创建完毕后被触发,这样可以提高网页的响应速度 15、js打印一个对象的所有属性: //传入一个对象 function (swiper){ var msg = "";

    4K40

    JS面试题】深克隆 和 浅克隆 有了解过吗?能手写深克隆吗?

    克隆 和 浅克隆 有了解过吗?能手写深克隆吗? 什么是克隆克隆其实就是拷贝,就是把一个对象中的属性复制一份,放到另一个对象中的过程。而属性的数据是有原始值和引用值之分。...浅克隆:当我们复制对象中属性的时候,如果是原始值,则两个对象中的变量随意修改,两者互不影响(敌动我不动)。如果是引用值,一个对象的变量改变,则另一个对象跟着变(敌动我便动)。...深克隆:深克隆就是解决拷贝引用值时“敌动我便动”的问题,无论数据怎么修改,两者互不影响。...深克隆的实现有两种方式:递归拷贝和JSON函数拷贝,我会用这两种方式分别来实现深拷贝 递归拷贝:将obj克隆到newObj中 let obj = { name: "前端猎手",...} } return target; } deepClone(obj,newObj) 代码验证: JSON函数拷贝:将obj克隆

    1.5K10

    JS之文档对象模型DOM

    Element DOM Attr DOM Text DOM Document HTML DOM是对XML DOM的扩展, HTML DOM比XML DOM 开发JS来说更加简单方便!...document.forms 获得页面中所有form元素集合 document.body 访问页面中 元素 document.cookie 用JS操作网页cookie信息 全局检索提供了三个重要的方法...replaceChild(新节点,被替换节点) ; 如果对于一个已经存在节点,执行 appendChild、 replaceChild都会造成该节点一个移动效果,可以采取先克隆再复制来消除此效果。...appendChild 父元素.appendChild(新的子节点) ; insertBefore 父节点.insertBefore(新子节点, 已经存在子节点) DOM 克隆节点 源节点.cloneNode...(true); 该方法可以返回一个节点的克隆节点, 克隆节点包含原节点的属性和子元素 此节内容有大量的练习,建议大家做写,增强代码的熟练度。

    3.3K60

    js对象(BOM部分DOM部分)

    JS总体包括ECMAScript,DOM,BOM三个部分,但是能够和浏览器进行交互的只有DOM和BOM,那么到底什么是DOM和BOM呢 概念 BOM(Browser Object Model)是指浏览器对象模型...setTimeout() 语法: var t=setTimeout("JS语句",毫秒) setTimeout() 方法会返回某个值。在上面的语句中,值被储存在名为 t 的变量中。...语法: setInterval("JS语句",时间间隔) 返回值 一个可以传递给 Window.clearInterval() 从而取消对 code 的周期性执行的值。...HTML DOM 模型被构造为对象的树 DOMDOM标准规定HTML文档中的每个成分都是一个节点(node): 文档节点(document对象):代表整个文档 元素节点(element 对象):代表一个元素...操作的JS代码应该放在文档的哪个位置。

    4.3K20
    领券