В Javascript, почему установка externalHTML на элемент устанавливает его parentNode в 'null'?

Question

В Javascript, когда я устанавливаю внешнийHTML элемента в DOM на новое значение (например, чтобы изменить его на другой элемент), его свойство parentNode получает значение «null». Зачем? Я бы ожидал, что он останется на том же значении, что и раньше, перед нарушениемHTML.

Я полагаю, что DOM создает новый объект при разборе строки 'externalHTML' и использует его для замены исходного объекта. Если это так, существует ли метод для извлечения этого вновь созданного объекта?

Действия по воспроизведению (протестировано на Linux Chrome & Linux Firefox)

1. Открыть чистые окна в вашем браузере,

2. Откройте DEV консоль (F12, наверное)

3. Взгляните на страницу DOM (вкладка «Элемент» в Chrome, Inspector в Firefox)

4. Удалить любых детей из ' тело», просто чтобы сделать вещи чище

5. Откройте консоль и введите:

   obj1 = document.createElement('div')

   obj1.id = '1'

   document.body.appendChild(obj1);

   obj1.parentNode - Если написать 'тело' HTML для консоли.

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

   obj1.parentNode - теперь пишет 'пустой' на консоль.

Answer 1

Это согласно doc

Кроме того, в то время как элемент будет заменен в документе, переменная , свойство outerHTML было установлено еще будет содержать ссылку на исходный элемент:

, что означает, что код obj1 в вашем коде по-прежнему относится к исходному элементу, который уже был отделен от дерева DOM.