节点和子节点之间的区别

Question

以下代码对我很好：

var q = theQty.shadowRoot.children[1].shadowRoot.children[0];

虽然下面的代码给了我一个错误＆＃34;没有这样的getter＆＃39; shadowRoot＆＃39;在＆＃39; Node＆＃39;＆＃34; ：

var q = theQty.shadowRoot.nodes[1].shadowRoot.nodes[0];

我无法理解使用节点（索引）或使用子（索引）之间的区别，还有什么想法？

Answer 1

主要区别在于nodes将为您提供元素的所有子元素。虽然children只会为您提供element类型的子项。 nodes还将包含评论和文字节点 - 例如。

一个小的JavaScript示例：

var span = document.createElement('span');
span.appendChild(document.createElement('span'));
span.appendChild(document.createTextNode('Test'));
console.log(span.childNodes.length, span.children.length)

将返回2 1。

Answer 2

children集合的类型为Element，其shadowRoot属性，而nodes是其基类Node的集合。在大多数情况下，它们可能是相同的（尽管Dartium中的Checked模式仍会抛出），因为只有少数其他类（如Document，DocumentFragment）扩展{{1但不是Node。