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文档.从概念上讲,它是文档树的根,并提供对文档数据的主要访问.

由于元素,文本节点,注释,处理指令等不能存在于a的上下文之外Document,该Document接口还包含创建这些对象所需的工厂方法.Node创建的对象具有一个ownerDocument属性,该属性将它们与Document创建它们的上下文相关联.

你会如何附加到DOM呢？

有多种方法可以插入新节点,例如appendChild ^[docs]或insertBefore ^[docs].

最后但并非最不重要的是具有分离节点的目的是什么？

一个优点是您可以离线构建复杂的子树,以便浏览器不必在每次插入节点时重新计算布局.

有时它对解析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,以便您的操作不会导致浏览器重排,例如,如果您要设置背景颜色,边框,附加子元素等,您希望在没有每次更改的内存都必须反映为浏览器中的视觉更改.