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 exist")的div包含"child"的情况下输出is-visible。

我设法进入了.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");
}

Answer 2

您可以使用var myArr = [String]() { didSet { print("now count is: \(myArr.count)") if myArr.count > 2 { print("now remove all!") myArr.removeAll() } } } myArr.append("hello") myArr.append(",world") myArr.append("!") myArr.append("too much.") print("The content is \(myArr)") // The content is ["too much."]来获取元素的所有子元素。

Element.childNodes

Answer 3

将此选择器div.outter div.parent .child.is-visible与功能 querySelectorAll 一起使用，这样，您将仅选择div .parent中{{1}之内的那些孩子}

Document.querySelectorAll()

Element方法querySelectorAll（）返回一个静态（非实时）NodeList，它表示与指定选择器组匹配的文档元素列表。

使用不同DIV分组的DIV div.outter查看此代码段，以显示选择器.is-visible的工作方式

div.outter div.parent .child.is-visible

var children = document.querySelectorAll("div.outter div.parent .child.is-visible");

console.log(children.length) // prints 4 and not 8 which is OK.

如果您需要检查类<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 class="myanother-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，然后使用函数 document.querySelector() ，则此函数将返回第一个div，而与类的div的数量无关.outter。

此方法检查.outter的结果，因为如果DOM没有类querySelector的DIV元素，则结果将为空。

document.querySelector()

Document方法.outter返回文档中与指定选择器或选择器组匹配的第一个Element。如果没有找到匹配项，则返回null。

querySelector()

var children = firstOutter ? firstOutter.querySelectorAll("div.parent .child.is-visible") : []

var firstOutter = document.querySelector('div.outter:nth-child(1)');    
var children = firstOutter ? firstOutter.querySelectorAll("div.parent .child.is-visible") : [];

console.log(children.length) // prints 2 and not 6 which is OK.

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

3 个答案:

`Document.querySelectorAll()`

`document.querySelector()`