导航

cloneNode一个注意的事项

Posted on 2015-01-12 15:02  八竿子打不着  阅读(662)  评论(0编辑  收藏  举报

用cloneNode方法克隆一个dom的时候,只会克隆原型链上的方法和属性,用户自定义属性,也就是OwnProperty不会被克隆。这个现象在firefox、chrome以及ie上表现均如此。

 

例如,页面上有个class为target的dom,我query出来后给他保存一些数据

var target=document.querySelector( ".border" );

target.name="zhanghai";

var newTarget=target.cloneNode(true);

console.log(newTarget.name);-->undefined

 

所以如果希望在克隆之后还保留自定义方法或属性的话,必须在克隆之后再手动赋一遍值,这当然是很麻烦,而且容易丢东西,但是到目前为止我还没想出什么好办法,除非给dom添加的方法和属性是直接放到原型链上,这样克隆就会带着了。但是这样也有问题,就是这么搞,方法可以,但是属性、数据字段这些这么一搞,就成了公共属性,而不是“私有”属性了,显然不可以。

 

当然这个问题想解决也不是没有办法,就是自己重新写一个clonenode函数,先调用原生的cloneNode,然后再for in一遍,把所有的ownproperty自动赋值,这样就行了。

 

现实当中有很多地方会用到cloneNode函数,最普遍的就是对于浏览器来说,不能在document上append两份同样的dom,所以遇到这种两个dom结构完全一样的,就会用到cloneNode方法。