Document.importNode VS Node.cloneNode(реальный пример)

Ответ 1

Alohci прав: нет большой разницы, так как веб-совместимость заставила браузеру неявно adoptNode() перед вставкой node в другой документ.

Прежде чем вставить клонированный node в новый документ, существует разница: документ владельца node, возвращаемый cloneNode(original), такой же, как и у исходного node, а новый документ if вы вызываете newDocument.importNode(original). Вы можете увидеть это различие, если используете ownerDocument или связанные с ним свойства (например, baseURI).

Но если вы вызываете importNode в том же документе, к которому принадлежит исходный node, нет никакой разницы.

Ответ 2

Проще говоря:

element.cloneNode() используется для клонирования узла из текущего document, например, с теневой DOM при добавлении какого-либо элемента DOM, такого как template. Там вы вызываете shadowDOM.appendChild(template.content.cloneNode(true)), где template - это экземпляр <template> определенный в вашем HTML. Здесь вы сообщаете JS, чтобы захватить элемент из текущей DOM и добавить его в теневую DOM.

document.importNode() используется для клонирования узла из другого документа, например, с <iframe> которого есть свой DOM, чтобы показать любой элемент из iframe в ваш DOM.

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

document.adoptNode() - это еще один метод, который очень похож на importNode() с той разницей, что он удаляет исходный элемент из его родительского DOM. importNode() копирует исходный элемент без удаления, а adoptNode() полностью удаляет исходный элемент из DOM.

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

Ответ 3

Единственное различие между этими двумя API-интерфейсами заключается в обновлении документа узла: с помощью cloneNode() он обновляется при добавлении узлов с помощью appendChild(), при этом document.importNode() обновляется при клонировании узлов. §4.12.3