JavaScript, for each hover over change the text color

Issue

I have 4 div (colored box) and each div represent a different color. When a user hovers over one of the colored boxes the text to display ("Hello world") should change to the color that is being hovered over. I wrote the code for each color, but it seems worng because I'm copying the code many times for each color. How can I make this code shorter and more efficient?

document.addEventListener('DOMContentLoaded', function() {

  const textToChange = document.getElementById('change_heading');

  const brownColor = document.querySelector('.brown');
  const greenColor = document.querySelector('.green');
  const blueColor = document.querySelector('.blue');

  brownColor.addEventListener('mouseover', function() {
    textToChange.classList.add('brown');
  });

  brownColor.addEventListener('mouseout', function() {
    textToChange.classList.remove('brown');
  });

  greenColor.addEventListener('mouseover', function() {
    textToChange.classList.add('green');
  });

  greenColor.addEventListener('mouseout', function() {
    textToChange.classList.remove('green');
  });

  blueColor.addEventListener('mouseover', function() {
    textToChange.classList.add('blue');
  });

  blueColor.addEventListener('mouseout', function() {
    textToChange.classList.remove('blue');
  });

});

div {
  width: 50px;
  height: 50px;
  display: inline-block;
}

.brown {
  background-color: brown;
}

.green {
  background-color: green;
}

.blue {
  background-color: blue;
}

.yellow {
  background-color: yellow;
}

<h1 id="change_heading">Hello World</h1>
SELECTED COLOR <span class="selected">None!</span>
<section>
  <div class="brown"></div>
  <div class="green"></div>
  <div class="blue"></div>
  <div class="yellow"></div>
</section>

Solution

You could shorten your code this way:

document.addEventListener('DOMContentLoaded', function() {
  const textToChange = document.getElementById('change_heading');
  const corloredDivs = document.querySelectorAll('section div');
  
  corloredDivs.forEach(d=>{
      d.addEventListener('mouseover', function() {
          textToChange.classList.add(d.classList[0]);
      });
      d.addEventListener('mouseout', function() {
        textToChange.classList.remove(d.classList[0]);
      });
   });

});

div {
  width: 50px;
  height: 50px;
  display: inline-block;
}

.brown {
  background-color: brown;
}

.green {
  background-color: green;
}

.blue {
  background-color: blue;
}

.yellow {
  background-color: yellow;
}

<h1 id="change_heading">Hello World</h1>
SELECTED COLOR <span class="selected">None!</span>
<section>
  <div class="brown"></div>
  <div class="green"></div>
  <div class="blue"></div>
  <div class="yellow"></div>
</section>

Answered By - yousoumar