Dart 节点、子节点、附加新元素

鉴于此代码：

Element elem=new Element.html（“这是一段。
”）；
文件.正文.附加（elem）；
文件。正文。子文件。添加（elem）；
document.body.nodes.add（elem）；

---

将

添加到
body.children
或
body.nodes
时，结果相同。这两者的区别是什么？哪个更好？
编辑：Kai的答案更好

原件：

document.body.append（elem）
只是
document.body.children.add（elem）
的包装

同样，
document.body.elements
只是
document.body.children
的包装

节点
和
子节点
使用不同的底层类来实现其功能。就功能而言，这两个子项提供了相同的列表函数集。这两种方法都缺少以下实现：
排序
、
设置范围
、
删除范围
、
插入范围
，以及
长度
的设置器。不过，这3个范围功能可能在将来实现

节点和子节点之间的重要区别在于
节点
使用延迟初始化访问子节点。具体而言，其“构造函数”只执行以下操作：

_ChildNodeListLazy(this._this);

而
子类的构造函数执行以下操作：

_ChildrenElementList._wrap(Element element)
  : _childElements = element.$dom_children,
    _element = element;

children
类在构造时立即调用$dom_children，以确保可以访问dom中的子对象。
节点
类不会使用任何本机$dom_*调用，直到您执行某些操作（例如添加项）

除此之外，
节点
和
子节点
似乎是相同的

至于哪一个更好，这取决于您的用例。如果要保存对子列表的引用，但不立即访问它，
节点
更好。但是现在这两种方法都没有那么有效，因为每次调用getter时，
节点的getter
和
子节点的getter都会创建包装类的新实例（调用
body.ChildrenElementList类的新实例）。因此，如果您对body的子对象进行大量后续调用，我建议使用
。
符号

document.body.children
    ..add(a)
    ..add(b)
    ..add(c)
    ..add(d);

您可以在中查看有关级联运算符的更多信息。
我将尝试简单地解释它

让我们假设这个HTML片段：


嘿
过得怎么样？

现在，问题是属性来自
元素
类。它返回其他
元素
对象的列表：

列出子项

因此，元素可以有作为元素的子元素，等等

但是我们还有属性，它来自
节点
类。它返回其他
节点
对象的列表：

列出节点

因此，节点可以有子节点，这些子节点本身也是节点

您应该问的问题是节点和元素之间的区别是什么

让我在前面的HTML代码段中添加一些注释：


嘿
过得怎么样？

记住，
元素
扩展了
节点
，这意味着
和
不仅是元素，而且是节点！在HTML中，一切都是一个节点。事实上，甚至注释
都是节点

当您访问该属性时，您将检索一个节点列表，基本上是一个包含其下所有内容的列表，包括HTML注释和文本

检索上面的
标记将返回一个
节点（“嘿！”）和一个
元素（
）。但是，检索属性只会返回包含单个
元素的列表（
）

因此，
节点
实际上包含所有内容，包括元素、文本节点、注释、文档类型等等

现在回答你的问题：

document.body.append（elem）；
文件。正文。子文件。添加（elem）；

这两个是一样的，第一个只是为了方便而包装

当您添加到
节点
或
子节点
时，实际上没有太大区别。但是，如果检索该属性，结果可能会有所不同。我通常会建议您使用
children
，因为结果更符合您的预期

就实现而言，正如Kyrra所提到的，它们之间的差异很小，但没有太大的差异