Удаление родительского элемента javascript

Удаление родительского элемента javascript

Материал на этой странице устарел, поэтому скрыт из оглавления сайта.

Управление памятью в случае с DOM работает по сути так же, как и с обычными JavaScript-объектами. Пока объект достижим – он остаётся в памяти.

Но есть и особенности, поскольку DOM весь переплетён ссылками.

Пример

Для примера рассмотрим следующий HTML:

Его DOM (показаны только основные ссылки):

Удаление removeChild

Операция removeChild разрывает все связи между удаляемым узлом и его родителем.

Поэтому, если удалить DIV из BODY , то всё поддерево под DIV станет недостижимым и будет удалено.

А что происходит, если на какой-то элемент внутри удаляемого поддерева есть ссылка?

Например, UL сохранён в переменную list :

В этом случае, так как из этого UL можно по ссылкам добраться до любого другого места DOM, то получается, что все объекты по-прежнему достижимы и должны остаться в памяти:

То есть, DOM-объекты при использовании removeChild работают по той же логике, что и обычные объекты.

Удаление через innerHTML

А вот удаление через очистку elem.innerHTML=". " браузеры интерпретируют по-разному.

По идее, при присвоении elem.innerHTML=html из DOM должны удаляться предыдущие узлы и добавляться новые, из указанного html . Но стандарт ничего не говорит о том, что делать с узлами после удаления. И тут разные браузеры имеют разное мнение.

Посмотрим, что произойдёт с DOM-структурой при очистке BODY , если на какой-либо элемент есть ссылка.

Обращаю внимание – связь разрывается только между DIV и BODY , т.е. на верхнем уровне, а list – это произвольный элемент.

Чтобы увидеть, что останется в памяти, а что нет – запустим код:

Как ни странно, браузеры ведут себя по-разному:

parentNode nextSibling children.length
Chrome/Safari/Opera null null 1
Firefox узел DOM узел DOM 1
IE 11- null null
Читайте также:  Как открыть два окна одновременно на андроид

Иными словами, браузеры ведут себя с различной степенью агрессивности по отношению к элементам.

Firefox Главный пацифист. Оставляет всё, на что есть ссылки, т.е. элемент, его родителя, соседей и детей, в точности как при removeChild . Chrome/Safari/Opera Считают, что раз мы задали ссылку на UL , то нам нужно только это поддерево, а остальные узлы (соседей, родителей) можно удалить. Internet Explorer Как ни странно, самый агрессивный. Удаляет вообще всё, кроме узла, на который есть ссылка. Это поведение одинаково для всех версий IE.

На иллюстрации ниже показано, какую часть DOM оставит каждый из браузеров:

Итого

Если на какой-то DOM-узел есть ссылка, то:

При использовании removeChild на родителе (или на этом узле, не важно) все узлы, достижимые из данного, остаются в памяти.

То есть, фактически, в памяти может остаться большая часть дерева DOM. Это даёт наибольшую свободу в коде, но может привести к большим «утечкам памяти» из-за сохранения данных, которые реально не нужны.

При удалении через innerHTML браузеры ведут себя с различной степенью агрессивности. Кросс-браузерно гарантировано одно: сам узел, на который есть ссылка, останется в памяти.

Поэтому обращаться к соседям и детям узла, предок которого удалён через присвоение innerHTML , нельзя.

Поддержка браузерами

Описание

Метод removeChild() удаляет указанный дочерний узел из родительского элемента.

Удалённый дочерний узел остаётся записанным в оперативной памяти, но более не является частью DOM. Так как метод возвращает удалённый дочерний узел, его можно сохранить к примеру в переменной, чтобы, если необходимо, к нему можно было бы обратиться позднее в коде.

Чтобы вставить удаленный узел в другое место в документе можно воспользоваться методом insertBefore() или appendChild().

Читайте также:  Сбросить все настройки на андроиде кнопками

Синтаксис

element — родительский элемент дочернего узла.

На этой странице

Аннотация

Удаляет дочерний элемент из DOM. Возвращает удаленный элемент.

Синтаксис

  • child дочерний элемент который будет удален из DOM.
  • element родительский элемент удаляемого child .
  • oldChild ссылка на удаляемый дочерний элемент. oldChild === child .

Удаленный дочерний элемент остается в памяти, но больше не является частью DOM. Вы можете повторно использовать удаленный элемент с помощью ссылки на объект — oldChild .

Если child не является дочерним элементом element , тогда метод генерирует исключение. Также это происходит если child является дочерним элементом element во время вызова метода, но был удален во время вызова обработчика событий удаляющего элемент(т.e при удалении элемента непосредственно перед вызовом обработчика событий).

Ссылка на основную публикацию
Тонны в сутки в кг в секунду
Сколько Килограмм в секунду в Метрическая тонна в сутки: 1 Килограмм в секунду = 86.4 Метрическая тонна в сутки 1...
Тарол волкова от тараканов отзывы
ЗДОРОВЬЕ И КРАСОТА ИЗ СИБИРИ Препарат нового поколения, обеспечивающий 100% эффект против тараканов и совершенно безопасный для человека и животных....
Тачки для gta sa
В этом разделе сайта вы можете скачать машины для GTA San Andreas. Пользователи очень любят скачивать моды машин именно с...
Тонер для заправки картриджей canon 725
Совместимость: Картридж Canon 728 подходит к принтерам MF-4410, 4430, 4450, 4550, 4570, 4580, 4730, 4750, 4780, 4870, 4890. Аналог —...
Adblock detector