时间戳

首页 > 解决方案 > 列出所有子元素的类名（Vanilla Javascript）

javascript - 列出所有子元素的类名（Vanilla Javascript）

问题描述

我有以下结构：

<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 exist")if div with classname "child"contains is-visible。

我已经设法进入.parent div但不确定如何进入子元素。

我使用的JS代码是：

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

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

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

标签： javascript

解决方案

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

您可以使用选择器：

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

推荐阅读