<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid black;
padding:8px;
}
</style>
</head>
<body>
<h1>The Document Object</h1>
<h2>The getElementsByClassName() Method</h2>
<p>Change the background color of the first element with the classes "example" and "color":</p>
<div class="example">
<p>This is a paragraph.</p>
</div>
<br>
<div class="example color">
<p>This is a paragraph.</p>
</div>
<br>
<div class="example color">
<p>This is a paragraph.</p>
</div>
<script>
const collection = document.getElementsByClassName("example color");
collection[0].style.backgroundColor = "red";
</script>
</body>
</html>