In Javascript, perché l'impostazione outerHTML su un elemento imposta il suo parentNode su "null"?

Question

In Javascript, quando imposto il outerHTML di un elemento nel DOM su un nuovo valore (per modificarlo in un elemento diverso, ad esempio), la sua proprietà 'parentNode' viene impostata su 'null'. Perché? Mi aspetto che rimanga a qualsiasi valore fosse prima che il cambiamento HTML esterno.

Immagino che il DOM stia creando un nuovo oggetto analizzando la stringa 'outerHTML' e usandolo per sostituire l'oggetto originale. Se questo è il caso, c'è un metodo per recuperare quell'oggetto appena creato?

Passaggi per riprodurre (testato su Linux Chrome & Linux Firefox)

1. Aprire una finestra pulita nel browser,

2. Aprire la console dev (F12, probabilmente)

3. Dai un'occhiata alla pagina DOM (scheda Elemento in Chrome, Inspector in Firefox)

4. Elimina tutti i bambini dell ' corpo', giusto per rendere le cose più pulita

5. Aprire la console e digitare:

   obj1 = document.createElement('div')

   obj1.id = '1'

   document.body.appendChild(obj1);

   obj1.parentNode - dovrebbe scrivere il '' HTML corpo alla console.

   obj1.outerHTML = "<div id='2'></div>"

   obj1.parentNode - ora scrive 'null' alla console.

Answer 1

Questo è secondo doc

Inoltre, mentre l'elemento sarà sostituito nel documento, la variabile cui proprietà outerHTML stato impostato sarà ancora mantenere un riferimento all'elemento originale :

che significa obj1 nel codice si riferisce ancora all'elemento originale che è stato staccato dall'albero DOM ormai.