JavaScript

Selecting DOM Elements

<section>
  <div>Tag</div>
  <div class="div-class">Class</div>
  <div class="div-class" id="div-id">ID</div>
</section>

section {
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin-top: 3rem;
  font-family: Helvetica;
}

div {
  border: 3px solid black;
  width: 100px;
  height: 100px;
  border-radius: 1rem;
  display:flex;
  justify-content: center;
  align-items: center;
  font-size: 1.3rem;
}


let firstDiv = document.querySelector("div");
let firstDivWithClass = document.querySelector(".div-class");
let divWithId = document.querySelector("#div-id");

firstDiv.style.backgroundColor = "darkorange";
firstDivWithClass.style.backgroundColor = "salmon";
divWithId.style.backgroundColor = "thistle";
