Cuando trabajamos con nodos DOM, es fundamental entender que cada nodo pertenece a un documento específico, y esta relación se refleja en la propiedad ownerDocument. Esta propiedad nos indica cuál es el documento raíz al que está asociado un nodo determinado. Por ejemplo, si tenemos un elemento con un identificador target en nuestra página, su ownerDocument será el documento principal que representa la página web que estamos visualizando.
Esta distinción cobra especial relevancia cuando tratamos con elementos como los template. Aunque visualmente el contenido de un template parece estar en el DOM, en realidad no forma parte del árbol DOM principal. Si intentamos buscar elementos dentro del contenido de un template usando métodos como document.getElementById o document.getElementsByClassName, no obtendremos resultados porque esos nodos están contenidos en un fragmento de documento separado. Por ejemplo, si dentro de un template tenemos un div con clase error icon, hacer una búsqueda en el documento principal no lo encontrará.
Para acceder a esos nodos, debemos referirnos al contenido del template a través de su propiedad .content, que es un fragmento de documento independiente. Este fragmento tiene su propio conjunto de nodos descendientes, que podemos recorrer o manipular. Además, cada uno de estos nodos tiene su propio ownerDocument, que es distinto del documento principal. Por ejemplo, si inspeccionamos el ownerDocument de un nodo dentro del contenido del template, veremos que no es el documento principal de la página, sino un documento separado.
Esta idea de documentos distintos también se aplica en otros contextos, como el uso de iframe. Cuando cargamos una página dentro de un iframe, estamos creando un documento DOM completamente independiente dentro de ese marco. Aunque podemos acceder al contenido del iframe desde el documento principal mediante JavaScript, desde el punto de vista del DOM son árboles separados.
Esta separación tiene implicaciones importantes cuando queremos mover nodos entre documentos diferentes. No podemos simplemente insertar un nodo de un documento en otro sin más, porque el DOM no lo permite directamente y nos dará errores relacionados con nodos ya montados o incompatibles. Para manejar esta situación, existen métodos específicos como importNode y adoptNode.
El método importNode crea una copia del nodo de otro documento para poder insertarlo en el documento actual. Por otro lado, adoptNode transfiere el nodo original de un documento a otro, cambiando su ownerDocument y permitiendo que forme parte del nuevo árbol DOM. En el contexto de Web Components y customElements, existe un callback que detecta cuando un elemento personalizado es adoptado en un nuevo documento, lo que facilita gestionar estos cambios de contexto.
En resumen, entender que cada nodo DOM pertenece a un documento específico y que elementos como template o iframe contienen nodos en documentos separados nos ayuda a manejar correctamente la manipulación y transferencia de nodos entre diferentes árboles DOM. Para ello, debemos usar las herramientas adecuadas como importNode y adoptNode, respetando la estructura y las reglas del DOM.