<div class='container'>
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
</div>
.container {
 display: flex;
 gap: 1rem;
}

.box {
  width: 200px;
  height: 200px;
  background-color: skyblue;
  display: grid;
  place-items: center;
}
// HTML 요소 모두 찾기
const boxEls = document.querySelectorAll(".box");

// 찾은 요소들 반복해서 함수 실행
boxEls.forEach(function (boxEl, index) {
  // 클래스 추가
  boxEl.classList.add(`order-${index + 1}`);

  // Getter, 값을 얻는 용도
  console.log(boxEl.textContent);

  // 클래스 div에 표시 Setter, 값을 지정하는 용도
  boxEl.textContent = `order-${index + 1}`;
  console.log(index, boxEl);
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.