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

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

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

    cloneNode importNode adoptNode

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

    回到顶部
    我要评论

    所有评论

      相关文章