cloneNode我们都知道是用来克隆一个DOM元素的,还有一个类似的功能叫importNode,cloneNode和importNode用的场景不太一样,cloneNode主要用来复制相同Document下的元素,importNode主要用来复制不同Document下的元素的,例如复制iframe里面的元素等。

但是其实cloneNode也可以用来复制不同Document下的内容,importNode也可以复制相同Document下的内容。换句话来说,这两个方法非常的相似,唯一的区别就是在append之前,两者所归属的document不同;append之后,两者归属的document就一样了,关键代码如下:

var _$iframe = document.getElementById('frame'),
_$iframe_nb = _$iframe.contentWindow.document.querySelector('.nb');
var node = _$iframe_nb.cloneNode(true);//append之前,ownerDocument为iframe ; append之后,ownerDocument为外层
var node = document.importNode(_$iframe_nb, true);//append之前,之后,ownerDocument都是外层
$('body').append(node);

cloneNode importNode adoptNode

上面还有一个就是adoptNode,这个和importNode类似,也是跨Document复制节点的,只不过是类似那种剪切的,会把原来的Document上的节点删掉,并且一旦调用adoptNode之后,ownerDocument就会自动变成当前的document。

回到顶部
我要评论

所有评论

返回
邮箱:
绑定
取消
×

我要评论

回复:

昵称:(昵称不超过20个字)

图片:

邮箱:
绑定邮箱后,若有回复,会邮件通知。
提交
还可以输入500个字