在 HTML DOM 中，在哪些情况下 element.parentElement 或 element.parentNode 会为 null？答案

【问题标题】：In which cases will element.parentElement or element.parentNode be null in a HTML DOM?在 HTML DOM 中，在哪些情况下 element.parentElement 或 element.parentNode 会为 null？
【发布时间】：2021-03-11 00:20:34
【问题描述】：

我使用 LitHTML 和我自己的基于 bloc 的库创建了自定义元素，用于状态管理。现在我偶然发现一个元素虽然在其他一些元素中很漂亮，但对于 parentNode 和 parentElement 返回 null。我不知道为什么？

parentNode 和 parentElement 为 null 的情况有哪些？

【问题讨论】：

c 没有 parentElement，但它确实有一个 parentNode，它是一个 shadowRoot。 shadowRoots 没有 parentNode 属性 (c.parentNode.parentNode)，但要访问 shadowRoot 附加到的元素，您可以使用 .host (c.parentNode.host)。见：Get shadow root host element，或ShadowRoot
@pilchard 是的，你是对的，请将其写为答案，我会接受它作为问题的解决方案。
使用 getRootNode developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode 。另见stackoverflow.com/questions/54520554/…
@Danny'365CSI'Engelman getRootNode 在普通节点上将直接获取一个文档节点。作为逻辑的一部分，我遍历每个节点并检查每个节点的属性。
酷，请添加您的代码，以便其他人学习

标签： javascript html web-component lit-html

【解决方案1】：

您的查询返回的元素c 没有parentElement，但它确实有一个parentNode，即shadowRoot。

ShadowRoots 没有parentNode 属性（这就是您的c.parentNode.parentNode 调用返回null 的原因），但是您可以通过访问shadowRoots host 属性（@ 987654332@).

查看文档：ShadowRoot

或相关问题：Get shadow root host element

【讨论】：