Il metodo adoptNode() in Javascript

Il metodo adoptNode() in JavaScript sposta un nodo da un documento a un altro.

var adoptedNode = document.adoptNode(externalNode);

Dove externalNode è il nodo che voglio adottare nel documento corrente.

E' particolarmente utile quando lavoro con più documenti in una pagina web. Ad esempio, in iframe.

Il metodo adoptNode() mi consente di prendere un nodo esistente in un documento e di adottarlo in un altro documento, senza dover creare una copia di quel nodo.

Dopo l'adozione, il nodo e tutti i suoi nodi discendenti diventano parte del nuovo documento. Il nodo viene rimosso dal suo documento originale (se presente) e diventa parte del nuovo documento. Tutti i riferimenti al nodo originale e ai suoi nodi discendenti vengono mantenuti. Quindi, il metodo non clona il nodo ma sposta il nodo originale. In altre parole, non ci sono duplicati.

Ad esempio, in questa pagina web c'è un iframe:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AdoptNode Example</title>
</head>
<body>
<div id="target"></div>
<iframe id="sourceFrame" src="source.html"></iframe>
<script>
// Supponiamo che source.html contenga un elemento con id="toBeAdopted"
window.onload = function() {
   var iframe = document.getElementById('sourceFrame');
   var sourceDoc = iframe.contentDocument || iframe.contentWindow.document;
   var nodeToAdopt = sourceDoc.getElementById('toBeAdopted');
   if (nodeToAdopt) {
      var adoptedNode = document.adoptNode(nodeToAdopt);
      document.getElementById('target').appendChild(adoptedNode);
      }
   };
</script>
</body>
</html>

Lo script individua un elemento con l'id "toBeAdopted" presente in un iframe e lo sposta nel documento principale.

Il metodo adoptNode() sposta direttamente l'elemento senza creare una copia, preservando così qualsiasi riferimento o stato associato all'elemento originale.

E così via

 

 


 

Segnalami un errore, un refuso o un suggerimento per migliorare gli appunti

FacebookTwitterLinkedinLinkedin
knowledge base

Document in Javascript

I metodi

Le proprietà