W JavaScript, dlaczego ustawienie outerHTML na elemencie ustaw jego parentNode na 'null'?

Question

W JavaScript, gdy ustawię outerHTML elementu w DOM na nową wartość (na przykład zmienić na inny element), jego właściwość "parentNode" zostaje ustawiona na "null". Czemu? Spodziewałabym się, że pozostanie przy jakiejkolwiek wartości przed zmianą HTTML.

Domyślam się, że DOM tworzy nowy obiekt z parsowania łańcucha "outerHTML" i używania go do zastąpienia oryginalnego obiektu. Jeśli tak, czy istnieje metoda pobierania tego nowo utworzonego obiektu?

Kroki prowadzące do odtworzenia (testowane na Linux Chrome & Linux Firefox)

1. Otwórz czyste okna w przeglądarce,

2. Otwórz konsolę dev (F12, prawdopodobnie)

3. Spójrz na stronę DOM (karta Element w przeglądarce Chrome, Inspector w przeglądarce Firefox).

4. Usuń wszystkie dzieci z ' ciało”, tak aby rzeczy czystsze

5. Otwórz konsolę i wpisz:

   obj1 = document.createElement('div')

   obj1.id = '1'

   document.body.appendChild(obj1);

   obj1.parentNode - należy napisać 'ciała' HTML do konsoli.

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

   obj1.parentNode - Teraz pisze 'null' do konsoli.

Answer 1

To jak na doc

Ponadto, podczas gdy element zostanie zastąpiony w dokumencie, zmienna którego outerHTML nieruchomość została ustawiona będzie nadal posiadać odniesienie do oryginalnego elementu :

co oznacza, że ​​obj1 w kodzie wciąż odnosi się do oryginalnego elementu, który został już odłączony od drzewa DOM.