javascript - 列出所有子元素的类名(Vanilla Javascript)

Question

我有以下结构:

<div class="outter">
  <div class="parent">
     <div class="child is-visible">1</div>
     <div class="child is-visible">2</div>
     <div class="child is-visible">3</div>
     <div class="child is-visible">4</div>
  </div>
</div>

并尝试进入父 div 并输出 console.log("Elements exit") 如果类名 "child" 的 div 包含 is-可见。

我已成功进入 .parent div 内部，但不确定如何进入子元素内部。

我使用的JS代码是:

var n = document.getelementById("outter");

if(n.classList.contains("parent")){
   var m = n.getAttribute("class");
   console.log(m);
}

我知道有很多对话和教程，但似乎我找不到可以解决我的问题的对话和教程。你能帮忙吗？

Answer 1

n 指的是 outter DIV(除非您应该按类而不是 ID 查找它)。您要查找的类名称位于其中的元素上，因此访问 n 的类列表对此不起作用。

您可以使用选择器:

n = document.querySelector("#outter");
if (n.querySelector(".parent .child.is-visible")) {
    console.log("Elements exist");
}