HTML中有孙子元素吗？答案

【问题标题】：Are there grandchild elements in HTML?HTML中有孙子元素吗？
【发布时间】：2015-09-16 07:05:08
【问题描述】：

我认为这显然是肯定的，但我正在阅读的教程告诉我：

“就像一个真正的家庭一样，元素有孩子，有孙子，曾孙，等等（尽管我们不区分使用 HTML——一个元素的子元素以及该子元素的所有子元素都是第一个父母的孩子）。”

这是惯例还是作者的意见？我已经对 W3C 进行了相当广泛的搜索，但找不到任何证据来证实这一说法。

【问题讨论】：

【解决方案1】：

HTML 中没有真正的孙元素。但是您可以封装元素，例如

<div id='a'>
    <div id='b'>
        <div id='c'>
        </div>
    </div>
</div>

如你所见，b 是 a 的子元素，c 是 b 的子元素。因此，从逻辑上讲，c 是 a 的孙元素，尽管没有 HTML 中的孙子元素。

【讨论】：

【解决方案2】：

他只是说你可以像这样无限地嵌套元素......

<div class="great-grandparent">
    <div class="grandparent">
        <div class="parent">
            <div class="child"></div>
        </div>
    </div>
</div>

【讨论】：

【解决方案3】：

从 iPhone 上执行此操作（抱歉，缺少随附的证据和/或完全正确的术语），但作为 15 年以上的网络开发人员，我同意只有孩子。这种行为同时出现在 CSS 和 JavaScript 中——当你想要一个元素中的某些东西时，你只需要它就好像它只是一个孩子一样。如果它真的是一个子层或三层以上并不重要，该过程将遍历 DOM 并标记/利用该元素的每个实例（符合要求）作为一个子级或更下层存在。

因此，虽然我无法指出确认这一点的正式文档，但任何操纵或修改 DOM 的行为 (AFAIR) 都符合“仅限子级”规范。

【讨论】：

【解决方案4】：

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

但与许多生物不同，创建新节点不涉及性和 DNA 混合。实际上，您甚至不需要父节点来创建新节点。你可以无中生有。

家谱

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

它不是一个节点网络，而是一棵树，所以总是（最多）一个节点（我们称之为父节点），在层次结构中较高，零个或多个节点较低。在演讲中，你称那些父母和孩子，因为用家谱类比很容易理解，但这也是比较结束的地方。只有一个“父级”，它是收养父级，因为它不一定是创建节点的那个。

常见的说法包括：

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

仅此而已。当然，你可以称他们为祖父母、叔叔、侄子和姐夫，但这会让人更加困惑，所以这并不是很有用。

孙子也是孩子吗？

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

例如，如果您有一个看起来像这样的 CSS 选择器：div img，它会选择所有 img 元素，这些元素是子、孙子、曾孙等任何div。 jQuery 和内置函数 querySelector and querySelectorAll 也严重依赖这种表示法。

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

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

【讨论】：

感谢您非常详细的回复，这完全为我澄清了一切！

【解决方案5】：

父节点的子节点的子节点不是其祖父节点的子节点，但它们是祖父母的后代节点。

当您在 xpath 中使用轴来查找节点时，这一点变得更加重要。

并非所有 html 都符合 xml。但它正在朝着这个方向发展。
您可以在脚本标签中使用 xpath 来查找 html 节点。
所以要注意后代和孩子之间的区别。

大多数使用 xpath 的关系使用 'descendent' 而不是 'child'，严格来说是上下文节点的直接子节点。

【讨论】：