Question

我有一个像这样的HTML元素

<div class="grand-parent">
  <div class="immediate-parent">
    <div class="grand-child"></div>
  </div>
</div>

但是，每当我想检查时

const grandchild = document.querySelector(".grand-child");
const grandparent = document.querySelector(".grand-parent");
console.log(grandparent.contains(grandchild));

我总是得到一个假值。我在Google Chrome 63.0.3239.84

上运行我的代码

Answer 1

是否有多个.grand-parent元素，或.grand-child元素？

querySelector（MDN link）返回第一个元素，因此您可能会遇到不需要的grandchild或grandparent元素。

Answer 2

您的代码肯定存在问题，而您的选择器可能没有选择正确的元素。

以下证明它有效。我将其从class更改为id，以确保我定位到正确的元素。运行代码段并亲自查看。

const grandchild = document.getElementById("grand-child");
const grandparent = document.getElementById("grand-parent");
console.log(grandparent.contains(grandchild));

<div id="grand-parent">
  <div id="immediate-parent">
    <div id="grand-child"></div>
  </div>
</div>

Node.contains（）不会将孙子孙女视为真实的

2 个答案: