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

Question

I am having the following structure:

<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>

and trying to get inside the parent div and output a console.log("Elements exist") if div with classname "child" contains is-visible .

I have managed to get inside the .parent div but not sure how to get inside the child elements.

The JS code I have used is:

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

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

I know there are quite a lot of conversations and tutorials but it seems that I can't find one that resolves my problem. Can you please help?

Answer 1

n refers to the outter DIV (except you should be looking it up by class, not ID). The class names you're looking for are on elements inside it, so accessing n 's class list won't work for this.

You can use a selector:

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

Answer 2

You can use Element.childNodes to get all of an element's children.

 <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> <script> var parent = document.getElementsByClassName("parent")[0]; var children = parent.childNodes; for(let i = 0; i < children.length; i++){ var classname = children[i].className; if(classname&&classname.includes("child is-visible")){ console.log("Class name contains child and is-visible"); } children[i].innerHTML += " <b>Child</b>"; } </script> 

Answer 3

Use the function querySelectorAll with this selector div.outter div.parent .child.is-visible , this way you're selecting only those children within div .parent which is within of div.outter

Document.querySelectorAll()

The Element method querySelectorAll() returns a static (not live) NodeList representing a list of the document's elements that match the specified group of selectors.

Look at this code snippet with DIVs .is-visible grouped by different DIVs, this is to show how it works the selector 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> 

If you need to check the first div with class .outter then use the function document.querySelector() , this function will return the first div regardless of the amount of div with class .outter .

This approach checks for the result of querySelector because if the DOM doesn't have any DIV element with class .outter the result will be null.

document.querySelector()

The Document method querySelector() returns the first Element within the document that matches the specified selector, or group of selectors. If no matches are found, null is returned.

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. 

 <div class="outter"> <div class="parent"> <div class="child is-visible">1</div> <div class="child is-visible">2</div> </div> </div> <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>