7

鉴于此代码：

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);

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

4

2 回答 2

10

我会试着简单地解释一下。

让我们假设这个 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>

请记住，Elementextends Node，这意味着<div>and<span>不仅是元素，而且是节点！一切都是 HTML 中的节点。事实上，即使是评论<!-- foo -->也是节点！

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

检索上面nodes的<div>标签将返回一个Node（“嘿！”）和一个Element（<span>）。但是，检索该children属性只会返回一个带有单个Element( <span>) 的列表。

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

现在回答你的问题：

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

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

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

在实施方面，Kyrra 提到的差异很小，但没什么大不了的。

于 2012-12-29T14:58:45.747 回答
1

编辑：凯的回答要好得多。

ORIGINAL:
document.body.append(elem)只是document.body.children.add(elem).

同样，document.body.elements它只是document.body.children.

.nodes并.children使用不同的底层类来实现它们的功能。在功能方面，这两个孩子提供了相同的 List 函数集。两者都缺少以下实现：sort, setRange, removeRange,insertRange和length. 不过，未来可能会实现 3 个范围功能。

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

_ChildNodeListLazy(this._this);

虽然 for 的构造函数children：

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

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

除此之外，似乎是一样的nodes。children

至于哪个更好，这取决于您的用例。如果您要保存对子列表的引用但不立即访问它，nodes那就更好了。但是现在两者都不是那么高效，因为每次调用 getter 时都创建包装类的新实例（调用nodes创建_ChildrenElementList 类的新实例）。因此，如果您要对 body 的孩子进行大量后续调用，我建议使用该符号。childrenbody.children..

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

..您可以在语言导览中查看有关级联运算符的更多信息。

于 2012-12-29T12:33:30.203 回答