html 为什么我会被骗?[关闭]

monwx1rj  于 2023-04-10  发布在  其他
关注(0)|答案(4)|浏览(79)

已关闭,该问题需要details or clarity,目前不接受回答。
**想要改进此问题?**通过editing this post添加详细信息并澄清问题。

5天前关闭。
Improve this question

const parent = document.querySelector(".parent");

if (parent.classList.contains("child")) {
  console.log(true);
} else {
  console.log(false);
}
<div class="parent">
  <div class="child"></div>
</div>

当我试图检查'parent'是否有一个'child'类时,我得到了false,但为什么呢?
我曾经使用contains(),一切都很好,但有一次我得到了错误的数据。为什么,你能帮我解决这个问题吗?指出我代码中的错误。

lf5gs5x2

lf5gs5x21#

当我试图检查'parent'是否有一个'child'类时,我得到了false,但为什么呢?
因为它没有这个类:

<div class="parent">

它确实 * 包含一个具有该类的元素 *。如果这就是你想要测试的,你可以选择 that 元素并检查结果是否是null。例如:

const childOfParent = document.querySelector(".parent .child");

if (childOfParent) {
  console.log(true);
} else {
  console.log(false);
}
<div class="parent">
  <div class="child"></div>
</div>

或者,如果您已经有parent对象,您可以从该元素中选择子元素:

const parent = document.querySelector(".parent");
const child = parent.querySelector(".child");

if (child) {
  console.log(true);
} else {
  console.log(false);
}
<div class="parent">
  <div class="child"></div>
</div>
0sgqnhkj

0sgqnhkj2#

父容器没有子类。父容器的子类有该类。
要么把类child放在父类上,要么像这样使用:if(parent.getElementsByClassName('child')[0]) {}

11dmarpk

11dmarpk3#

parent.classList是一个数组,其中包含匹配元素本身的类,而不是is子元素。
您可以使用它的.children属性来访问它的直接祖先

const parent = document.querySelector(".parent");
const children = Array.from(parent.children);

console.log(
  children.some(child => child.classList.contains("child"))
);
<div class="parent">
  <div class="child"></div>
</div>
hk8txs48

hk8txs484#

您可以查询嵌套的.child,而不是在.parent上使用classList(这是不正确的):

const parent = document.querySelector('.parent');

if (parent.querySelector('.child') !== null) {
  console.log(true);
} else {
  console.log(false);
}
<div class="parent">
  <div class="child"></div>
</div>

相关问题