html - HTML 中有孙子元素吗？

Question

我认为这是一个明显的肯定，但我正在经历的教程告诉我不然:

"Just like a real family, elements have children, grandchildren, great-grandchildren, and so on (though we don't make this distinction with HTML—a child of an element, and all that child's children, are children of the first parent)."

这是惯例还是作者的观点？我在 W3C 上进行了相当广泛的搜索，但找不到任何证据证实这一说法。

Answer 1

不，不是真的。确实，HTML 元素或 HTML 文档中的节点(DOM = 文档对象模型)可以有子级，也可以有父级。

但与许多生物不同的是，创建新节点并不涉及性行为和 DNA 混合。实际上，您甚至不需要父节点来创建新节点。您可以从无到有创建一个。

家谱

那么这些关系有什么用呢？嗯，它们只是为了将它们放在一个层次结构中。 HTML 文档有一个根节点，就像节点中的亚当一样。其他节点可以将此节点作为其“父节点”，这意味着它们在层次结构中仅低一级。

它不是一个节点网络，而是一棵树，因此总是(最多)有一个节点(我们称之为父节点)，在层次结构中处于较高位置，零个或多个较低节点。在言语中，你称这些为 parent 和 child ，因为这是一个很容易理解的家谱类比，但这也是比较结束的地方。只有一个“父代”，并且它是收养父代，因为它不一定是创建节点的父代。

所以常见的说法包括:

• 父节点:层次结构中较高的节点(靠近树干)
• 子节点:层次结构中较低的节点(树中当前节点的分支)。您可以使用属性 children 找到或childNodes DOM 中的节点。
• 兄弟节点:共享同一父节点的节点。
• 后代:节点的子节点、孙子节点、曾孙节点。

这就是目前为止的情况。当然你可以称他们为祖 parent 、叔叔、侄子、姐夫，但这会让人更加困惑，所以这并没有多大用处。

孙子也是 child 吗？

现在这段文字说孙子也是 child 。从某种程度上来说，这是真的。

例如，如果您有一个如下所示的 CSS 选择器:div img，它会选择所有属于子元素、孙子元素、曾孙元素的 img 元素，任何div的等等。 jQuery 和内置函数 querySelector and querySelectorAll也严重依赖这种表示法。

但是，如果您从 JavaScript 引用元素的 children 属性，您将仅获得直接子元素，而没有孙子元素。实际上，CSS 选择器也做出了这种区分。如果您选择 div img，您将获得后代图像，如果您选择 div > img，您只会获得 div 的直接子级图像。 (参见CSS child and sibling selectors)

所以，不，这种说法是不正确的。一个节点只有子节点，并且这些子节点可以有自己的子节点。 CSS 和 JavaScript 中有智能选择器，可让您选择家谱中任何“深度”的后代，但这并不会使这些节点成为父节点的直接子节点。