How to get control in <li> tag inside <ul> tag by JavaScript?

This is my code,

<div style="background-color:red;">
   <ul class="myClass">
      <li> CCD </li>
      <li class="active"> BCA </li>
      <li> ABC </li>

I want to change div color automatically when there is class="active". How to get the li class, when I only have class for ul, and how to change this div background color with javascript?

Answers 1

  • Using vanilla JS

    var divs = document.getElementsByTagName("div")
    for (var i = 0; i < divs.length; i++) {
     // get all child nodes inside divs
     var children = divs[i].getElementsByTagName("*");
     for (var j = 0; j < children.length; j++){
      if(children[j].className === "active"){
        children[j].style.backgroundColor = 'blue';
    <script src=""></script>
    <div style="backgroundColor='red'">
      <ul class="myClass">
        <li class="active">BCA</li>

Related Articles