Javascript DOM HTML Element getElementsByClassName() Method by two class names

Introduction

Change the background color of the first element with both the "child" and "color" class inside of an element with class="example":

Click the button to change the background color of the first p element with classes "child" and "color" inside the second div element with class="example".

View in separate window 

<!DOCTYPE html>
<html>
<head>
<style>
div {/*w  w w  .  j av a  2 s  . c  o  m*/
  border: 1px solid black;
  margin: 5px;
}
</style>
</head>
<body>

<div class="example">
  <p class="child">
  P element with class="child" in first div with class="example". 
  P's index is 0, and Div's index is 0.
  </p>
</div>

<div class="example">
  <p class="child color">
  First P element with class="child" and "color" in second div with class="example". 
  P's index is 0, and Div's index is 1.</p>
  <p class="child color">
  Second P element with class="child" and "color" in second div with class="example". 
  P's index is 1, and Div's index is 1.</p>
</div>

<div class="example">
  <p class="child color">
  test</p>
  <p class="child color">
  test</p>
</div>

<button onclick="myFunction()">Test</button>
<script>
function myFunction() {
  var x = document.getElementsByClassName("example")[1];
  x.getElementsByClassName("child color")[0].style.backgroundColor = "red";
}
</script>

</body>
</html>



PreviousNext

Related