remove - insert node javascript

Document.importNode VS Node.cloneNode(ejemplo real)

Question

Document.importNode en la especificación

Node.cloneNode en la especificación

Estos dos métodos funcionan igualmente. Por favor, dame un ejemplo real en el que pueda ver la diferencia entre estos métodos.

Answer 1

Simplemente pon:

element.cloneNode() se usa para clonar un nodo del document actual, por ejemplo, con el DOM de sombra cuando se agrega cualquier elemento del DOM, como una template . Allí se llama shadowDOM.appendChild(template.content.cloneNode(true)) , donde template es una instancia de <template> definida en su HTML. Aquí le está diciendo a JS que tome el elemento del DOM actual y lo agregue al DOM de la sombra.

document.importNode() se usa para clonar un nodo de otro documento, por ejemplo, con <iframe> que tiene su propio DOM, para mostrar cualquier elemento de un iframe en su DOM.

var frame = document.getElementsByTagName("IFRAME")[0]
var h = frame.contentWindow.document.getElementsByTagName("H1")[0];
var x = document.importNode(h);

document.adoptNode() es otro método que es bastante similar a importNode() con la diferencia de que elimina el elemento original de su DOM principal. importNode() copia el elemento original sin eliminarlo, mientras que adoptNode() elimina completamente el elemento original de su DOM.

var frame = document.getElementsByTagName("IFRAME")[0]
var h = frame.contentWindow.document.getElementsByTagName("H1")[0];
var x = document.adoptNode(h);

Answer 2

Alohci tiene razón: no hay mucha diferencia, ya que la compatibilidad web obligó a los navegadores a adoptNode() antes de insertar un nodo en otro documento .

Antes de insertar el nodo clonado en un documento nuevo, hay una diferencia: el documento propietario del nodo devuelto por cloneNode(original) es el mismo que el del nodo original, y el nuevo documento si llama a newDocument.importNode(original) . Puede ver esta diferencia si usa ownerDocument o propiedades relacionadas (como baseURI).

Pero si llama a importNode en el mismo documento al que pertenece el nodo original, no hay diferencia alguna.