dart - 节点，子节点，追加新元素

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 属性(property)来自 Element类(class)。它返回其他 Element 的列表对象:

List<Element> children

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

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

List<Node> nodes

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

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

让我在之前的 HTML 片段中添加一些注释:

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

记住，Element扩展 Node ，这意味着 <div>和 <span>不仅是元素，也是节点!一切都是 HTML 中的一个节点。其实连评论<!-- foo -->是节点!

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

检索 nodes 为 <div>上面的标签将返回一个 Node (“嘿!”)和一个 Element ( <span> )。但是，检索 children 属性只会返回一个列表，其中包含一个 Element ( <span> )。

所以，nodes字面上包含所有内容，包括元素、文本节点、注释、文档类型等。

现在回答你的问题:

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

这两个是相同的，第一个只是为了方便起见。

当您添加到 nodes或 children ，其实差别不大。但是，如果您检索该属性，结果可能会有所不同。我通常建议您使用 children因为结果更符合您的预期。

在实现方面，Kyrra 提到的差异很小，但没有什么太大的不同。