节点,儿童,附加新元素

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中的节点.事实上,甚至评论<!-- foo -->都是节点!

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

nodes对<div>上面的标签进行重复将返回一个Node("嘿!")和一个Element(<span>).但是,检索children属性只会返回带有single Element(<span>)的列表.

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

现在回答你的问题:

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

这两个是相同的,第一个只是一个方便的包装.

当您添加到nodes或者children,确实没有太大的区别.但是,如果检索属性,结果可能会有所不同.我通常建议你使用,children因为结果更符合你的期望.

实施明智,Kyrra提到的几乎没有差异,但没有太多关注.