HTML中是否有孙元素?

Are there grandchild elements in HTML?

我认为这显然是肯定的,但我正在学习的教程告诉我并非如此:

"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 进行了相当广泛的搜索,但找不到任何证据证实这一说法。

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

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

可以看到,b是a的子元素,c是b的子元素。 因此,从逻辑上讲,c 是 a 的孙元素,尽管没有 HTML 中的孙元素。

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

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

从 iPhone 开始这样做(很抱歉缺少随附的证据 and/or 完全正确的术语),但作为 15 年以上的网络开发人员,我同意只有 children .这种行为同时出现在 CSS 和 JavaScript 中——当你想要元素内部的东西时,你只需要它就好像它只是一个 child 一样。如果它真的是 child 或 three-plus 层再往下并不重要,该过程将遍历 DOM 和 flag/utilize 该元素的每个实例(匹配要求)作为 child 或进一步向下存在。

因此,虽然我无法指出证实这一点的正式文档,但任何操作或修改 DOM 的行为 (AFAIR) 都符合“child-only”规范。

不,不是真的。 HTML 元素或 HTML 文档(DOM = 文档 Object 模型)中的一个节点确实可以有 children 并且可以有一个 parent。

但与许多生物不同的是,创建新节点不需要性和 DNA mix-up。实际上,您甚至不需要 parent 来创建新节点。你可以无中生有地创造一个。

家谱

那么这些关系有什么用呢?好吧,它们只是为了将它们放在一个层次结构中。 HTML文档有一个根节点,就像节点中的亚当。其他节点可以将此节点作为它们的 'parent',这意味着它们在层次结构中仅低一级。

它不是节点网络,而是一棵树,所以总是(至多)一个节点(我们称之为 parent),层次结构较高,零个或多个节点较低。在演讲中,你称这些为 parents 和 children,因为它与家谱的类比很容易理解,但这也是比较结束的地方。只有一个'parent',是领养parent,因为不一定是创建节点的那个

所以常见的说法包括:

  • Parent:层次结构中较高的节点(靠近树干)
  • Children:层次结构中较低的节点(树中当前节点的分支)。您可以在 DOM.
  • 中找到节点的使用 属性 children or childNodes
  • 兄弟节点:共享相同的节点parent。
  • 后代:children, grand children, great grand children 的节点。

到此为止。当然你可以称他们为爷爷parent、old-uncles、侄子和brothers-in-law,但这样会更容易让人混淆,所以这没什么用。

盛大children也是children吗?

今文说大child人也是child人。在某种程度上是正确的。

例如,如果您有一个 CSS select 或看起来像这样的:div img,它 select 是所有 img 元素child任,大child任,太祖child任,等等div。 jQuery 和内置函数 querySelector and querySelectorAll 也严重依赖这种表示法。

但是,如果您引用 JavaScript 中元素的 children 属性,您只会得到直接的 children 而不会得到 grand child仁。实际上,CSS selector 也做出了这种区分。如果你 select div img 你会得到后代图像,如果你 select div > img 你只会得到直接 children of a div 的图像. (参见 CSS child and sibling selectors

所以,不,这个说法是不正确的。一个节点只有children,那些children可以有自己的children。 CSS 和 JavaScript 中有聪明的 select 或 select 可以让您 select 家族中任何 'depth' 的后代 树,但这并不能使这些节点成为 parent.

的直接 child

parent节点的child节点的child节点不是其grandparent节点的child节点, 但它们是它们的 grandparent.

的后代节点

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

并非所有 html 都符合 xml。但它正在朝那个方向发展。
您可以在脚本标签中使用 xpath 来查找 html 个节点。
所以一定要注意后代和child.

的区别

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