Как DIV-узел может быть «отсоединен» и в чем польза?

Question

В этой статье создается отдельный узел Div: http://www.bennadel.com/blog/1008-jQuery-empty-Kills-Event-Binding-On-Persistent-Nodes.htm

Я не понимаю: я думал, что DOM владеет всеми узлами. Как бы вы тогда подключились к DOM?

И последнее, но не менее важное: какова цель отключения узла?

Answer 1

Я не уверен, какой ответ вы ожидаете, поэтому вот несколько мыслей:

Я думал, что DOM владеет всеми узлами.

Документ владеет каждым узлом. Каждый узел имеет свойство ownerDocument ^[MDN] .

Из спецификации :

Интерфейс Document представляет весь документ HTML или XML. Концептуально он является корнем дерева документа и обеспечивает основной доступ к данным документа.

Поскольку элементы, текстовые узлы, комментарии, инструкции по обработке и т. Д. Не могут существовать вне контекста Document, интерфейс Document также содержит фабричные методы, необходимые для создания этих объектов. Созданные объекты Node имеют атрибут ownerDocument, который связывает их с Document, в контексте которого они были созданы.

---

Как бы вы тогда подключились к DOM?

Существуют различные способы вставки нового узла, например appendChild ^{[документы]} или insertBefore ^{[документы]} .

---

И последнее, но не менее важное: какова цель отключения узла?

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

Иногда это также полезно для анализа строки HTML. Создав пустую отдельную div и назначив строку HTML для innerHTML, вы можете легко анализировать и обрабатывать строку HTML.

Единственное предостережение в том, что document.getElementById не может найти узлы, которые не являются частью дерева.

---

Также интересным в этом отношении может быть объяснение свойства Node.parentNode. В конце концов, Node, у которого нет родителя, не является частью дерева:

Родитель этого узла. Все узлы, кроме Attr, Document, DocumentFragment, Entity и Notation, могут иметь родителя. Однако, если узел только что был создан и еще не добавлен в дерево, или если он был удален из дерева, это null.

Answer 2

с помощью document.createElement() вы можете создать узел элемента

var p = document.createElement("p");

На этом этапе он будет существовать в памяти, но не будет присоединен к DOM.

Существует множество способов присоединения узла к DOM, но, вероятно, самым простым будет использование element.appendChild(node)

var p = document.createElement("p");

// attach the newly created node to the document body
document.body.appendChild(p);

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

Answer 3

Страница, на которую вы ссылаетесь, использует .empty(), которая отсоединяет элементы от DOM , а удаляет все обработчики событий из этих элементов.

Существует также .detach(), что может бытьты имеешь в виду..detach() в основном просто отделяет узел от DOM.Это больше не часть DOM;он просто висит в памяти (пока вы храните его в переменной).Это означает, что если вы отбрасываете переменную, вы навсегда потеряли отсоединенный узел (он не находится ни в DOM, ни в переменной).

Сценарий использования - это, например, временное «удаление» элемента из DOM безфактически отклонить его, так что вы можете присоединить его позже (используя .append / .after / etc).

var detached = $("...").detach();

// later:
$("body").append(detached);

Answer 4

Вы можете определенно создавать элементы, которые не являются частью DOM.

var someElement = document.createElement("div");
var someOtherElement = $("<div>");

Выполнение операций над отсоединенными элементами намного более эффективно, чем выполнение операций над присоединенными элементами, поскольку отсоединенные элементы не должны отображаться.

Answer 5

Модификация DOM стоит дорого.Вы можете создать отдельный объект, настроить его так, как вам нужно (добавив его атрибуты, привязывающие обработчики событий и т. Д.).После того, как вы настроите его так, как вам нужно, , затем добавьте его в DOM.