Question

鉴于此代码：

Element elem  = new Element.html("<p>This is a paragraph.</p>");

document.body.append(elem);
document.body.children.add(elem);
document.body.nodes.add(elem);

当我add到body.children或body.nodes时，结果相同。两者有什么区别？哪个更好？

Answer 1

我会尽力解释一下。

我们假设这个HTML片段：

<div>
  Hey!
  <span>How is it going?</span>
</div>

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

List<Element> children

因此，元素可以包含子元素，等等。

但是我们有nodes属性，来自Node类。它返回其他Node个对象的列表：

List<Node> nodes

因此，节点也可以拥有自己也是节点的子节点。

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

让我在之前的HTML代码段中添加一些评论：

<div> <!-- Element -->
  Hey! <!-- Node -->
  <span> <!-- Element -->
    How is it going? <!-- Node -->
  </span>
</div>

请记住，Element扩展Node，这意味着<div>和<span>不仅是元素，还是节点！一切都是HTML中的节点。事实上，即使评论也是节点！

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

重复上述<div>标记的nodes会返回一个Node（“嘿！”）和一个Element（<span>）。但是，检索children属性只会返回一个包含Element {（1}}）的列表。

因此，<span>字面上包含所有内容，包括元素，文本节点，注释，文档类型等。

现在回答你的问题：

nodes

这两个是相同的，第一个只是一个方便的包装。

当您添加到document.body.append(elem); document.body.children.add(elem);或nodes时，没有太大区别。但是，如果检索属性，结果可能会有所不同。我通常会建议您使用children，因为结果更符合您的预期。

实施明智，Kyrra提到的几乎没有什么区别，但没有太多关注。

Answer 2

编辑：Kai的答案要好得多。

ORIGINAL：
document.body.append(elem)只是document.body.children.add(elem)的包装器。

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

.nodes和.children使用不同的基础类来实现其功能。功能方面，这两个孩子提供了相同的List函数集。两者都缺少以下实现：sort，setRange，removeRange，insertRange以及length的setter。但是，将来可以实现3个范围功能。

节点和子节点之间的重要区别是nodes使用延迟初始化来访问子节点。具体来说，它的构造函数就是：

_ChildNodeListLazy(this._this);

children的构造函数执行：

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

children类在构造时立即调用$ dom_children，这样可以确保来自DOM的子代可以访问。在您执行某些操作（例如添加项目）之前，nodes类不会使用任何本机$ dom_ *调用。

除此之外，nodes和children似乎是相同的。

哪个更好，这取决于您的用例。如果您要保存对子列表的引用但不立即访问它，nodes会更好。但是现在两者都没有效率，因为nodes和children的getter都会在每次调用getter时创建包装类的新实例（调用body.children会创建一个新的实例_ChildrenElementList类）。因此，如果您正在对身体的孩子进行大量后续调用，我建议您使用..表示法。

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

您可以在language tour中查看有关级联运算符..的更多信息。

节点，儿童，附加新元素

2 个答案: