Złapanie zawartości diva z atrybutem 'class'

Po pierwsze, witam wszystkich forumowiczów. Po dość jednak krótkim czasowo zaangażowaniu w rozwijanie swoich umiejętności webmasterskich, czas powoli zasięgać rady bardziej doświadczonych w tej branży osób. Wydaje mi się, że im wcześniej sięgnę po inne źródło niż tylko książki, tym lepiej. Dlatego staram się bazować nie tylko na podręcznikach do programowania ale też korzystam z kursów Pana Zelenta. Myślę, że udzielając się na forum, wejdzie mi bardziej w krew jeszcze jedna ważna metoda nauki: czyli nauka na błędach. Książka jednak nie potrafi sprawdzić napisanego przez kogoś kodu i dopasować wyjaśnień pod konkretny błąd. Bo to tylko teoria napisana od deski do deski. Dobra, przechodzę do sedna tego wątku:

Mam napisany w HTML i wystylizowany już kalendarz w przeglądarce. Teraz chciałbym umożliwić jakąś interakcję w tym kalendarzem za pomocą JavaScript. Problem dotyczy dni miesiąca. Każdy z tych dni jest umieszczony w div o klasie "dayOfMonth". Po kliknięciu na któryś z tych dni, chciałbym aby w innym divie wyświetlał się ten dzień oraz do tego nazwa miesiąca i rok. Czyli dodatkowe info. No i wydaje mi się, że najlepiej uchwycić zawartość div'a, który zawiera interesujący nas numerek dnia a potem stworzyć warunek, który podmieni zawartość div'a wyświetlającego dodatkowe informacje o tym dniu. Tutaj już mam problem, bo nie wiem jak zapisać do zmiennej zawartość div'a z numerkiem dnia. No i nie wiem czy użyć id czy class, bo w końcu chciałbym na podstawie każdego osobnego dnia podmienić zawartość w div z dodatkowym info o dniu. Zamieszczam kod html z tagami script oraz CSS:

<!DOCTYPE html>
<html lang="pl">
<head>
	<title>Kalendarz</title>
	<meta charset="utf-8"/>
	<link rel="stylesheet" href="style.css" />
	<link href="https://fonts.googleapis.com/css?family=Montserrat&amp;subset=latin-ext" rel="stylesheet">
	<script>
		function zmienDzien(){
			var day = document.getElementsByClassName('dayOfMonth').value;
			alert(day);
		}
	</script>
</head>
<body>
	<div id="container">
		<div id="current">
			1 Maja 2017
		</div>
		<div id="content">
			<div id="week">
				<div class="day">Pon</div>
				<div class="day">Wt</div>
				<div class="day">Sr</div>
				<div class="day">Czw</div>
				<div class="day">Pt</div>
				<div class="day">Sob</div>
				<div class="day">Nd</div>
				<div style="clear:both;"></div>
			</div>
			<div id="days">
				<div class="dayOfMonth">1</div>
				<div class="dayOfMonth">2</div>
				<div class="dayOfMonth">3</div>
				<div class="dayOfMonth">4</div>
				<div class="dayOfMonth">5</div>
				<div class="dayOfMonth">6</div>
				<div class="dayOfMonth">7</div>
				<div style="clear: both;"></div>
				<div class="dayOfMonth">8</div>
				<div class="dayOfMonth">9</div>
				<div class="dayOfMonth">10</div>
				<div class="dayOfMonth">11</div>
				<div class="dayOfMonth">12</div>
				<div class="dayOfMonth">13</div>
				<div class="dayOfMonth">14</div>
				<div style="clear: both;"></div>
				<div class="dayOfMonth">15</div>
				<div class="dayOfMonth">16</div>
				<div class="dayOfMonth">17</div>
				<div class="dayOfMonth">18</div>
				<div class="dayOfMonth">19</div>
				<div class="dayOfMonth">20</div>
				<div class="dayOfMonth">21</div>
				<div style="clear: both;"></div>
				<div class="dayOfMonth">22</div>
				<div class="dayOfMonth">23</div>
				<div class="dayOfMonth">24</div>
				<div class="dayOfMonth">25</div>
				<div class="dayOfMonth">26</div>
				<div class="dayOfMonth">27</div>
				<div class="dayOfMonth">28</div>
				<div style="clear: both;"></div>
				<div class="dayOfMonth">29</div>
				<div class="dayOfMonth">30</div>
				<div class="dayOfMonth">31</div>
				<div class="dayOfMonth">1</div>
				<div class="dayOfMonth">2</div>
				<div class="dayOfMonth">3</div>
				<div class="dayOfMonth">4</div>
			</div>
		</div>
	</div>
	<script>zmienDzien();</script>
</body>
</html>

body
{
	background-image: url(images/weather.png);
	font-family: 'Montserrat', sans-serif;
}

#container
{
	margin-left: auto;
	margin-right: auto;
	margin-top: 50px;
	background-color: #ffffb3;
	width: 500px;
	height: 530px;
	border: solid 1px #eecc99;
	border-radius: 20px;
}

#current
{
	text-align: center;
	line-height: 30px;
	letter-spacing: 2px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 20px;
	width: 400px;
	height: 30px;
	padding: 5px;
	border: solid 1px #eecc99;
	border-radius: 10px;
}

#content
{
	margin-left: auto;
	margin-right: auto;
	margin-top: 20px;
	width: 400px;
	height: 400px;
	padding: 5px;
	border: solid 1px #eecc99;
	border-radius: 10px;
}

#week
{
	text-align: center;
}

.day
{
	width: 50px;
	height: 50px;
	float: left;
	margin-top: 30px;
	margin-left: 7px;
	text-align: center;
	color: #ff5c33;
}

.dayOfMonth
{
	width: 50px;
	height: 50px;
	float: left;
	margin-top: 5px;
	margin-left: 7px;
	text-align: center;
	line-height: 50px;
}

.dayOfMonth:hover
{
	background-color: #dddda2;
	cursor: pointer;
}