"HTML 요소들을 한 번에 불러오자! 자바스크립트 getElementsByClassName 사용법"

▶ getElementsByClassName 정리

  JavaScript의 DOM 선택자 중 하나인 getElementsByClassName 

 

▶ 이 명령어가 뭐하는 건지

getElementsByClassName은 HTML 요소 중에서 특정 클래스 이름을 가진 모든 요소를 한 번에 선택하는 명령어.

📌 여러 개의 요소가 선택되며, 반환값은 HTMLCollection이라는 유사 배열 형태.

 

▶ 명령어 문법

document.getElementsByClassName("클래스이름");

 

• document는 현재 HTML 문서 전체를 의미.
• 괄호 안에 클래스 이름을 문자열 형태로 넣음.
• 여러 요소가 선택되기 때문에 결과는 배열처럼 생긴 HTMLCollection 임.

▶  파라미터에 어떤 게 들어갈 수 있는지?

• 오직 클래스 이름만 문자열로 전달할 수 있음. (CSS 선택자처럼 .class 말고 "class"만 넣어야 함)

document.getElementsByClassName("menu");    // class="menu"
document.getElementsByClassName("box red"); // class="box red" (두 클래스 모두 있는 요소)

 

▶ 주로 어떻게 쓰는지

• 같은 클래스명을 가진 요소들을 한꺼번에 선택해서 스타일을 바꾸거나,
• 반복문으로 이벤트를 달거나,
• 내용을 변경할 때 사용.

보통 반복문과 함께 많이 사용함:

• for 문
• for...of
• Array.from(...).forEach(...)

 

▶ 예시

 

✅ 여러 버튼에 같은 클래스가 있을 때, 모두 비활성화하기

<button class="btn">버튼1</button>
<button class="btn">버튼2</button>
<button class="btn">버튼3</button>

<script>
  const buttons = document.getElementsByClassName("btn");
  for (let i = 0; i < buttons.length; i++) {
    buttons[i].disabled = true;
  }
</script>

 

 

✅ 클릭 시 모든 .box에 배경색 넣기

<div class="box">박스1</div>
<div class="box">박스2</div>
<div class="box">박스3</div>
<button onclick="highlightBoxes()">색 바꾸기</button>

<script>
  function highlightBoxes() {
    const boxes = document.getElementsByClassName("box");
    for (let box of boxes) {
      box.style.backgroundColor = "yellow";
    }
  }
</script>

 

✅ 요약 정리

 

※ 유사배열 (HTMLCollection)

 

• 유사 배열(HTMLCollection)은 배열처럼 길이를 가지고, 인덱스를 사용하여 접근할 수 있는 객체임.
• 하지만 배열이 아니기 때문에 배열 메서드(예: forEach, map, filter 등)를 사용할 수 없음.
• 그래서 보통 배열처럼 사용하려면 배열로 변환해야 함.
  • 예를 들어, Array.from()이나 spread operator(...)를 사용해서 유사 배열을 정식 배열로 바꿔야 배열 메서드를 사용할 수 있음.

const buttons = document.getElementsByClassName("btn");
// HTMLCollection은 배열이 아니므로 아래처럼 배열로 바꿔야 forEach 같은 배열 메서드를 사용 가능
const buttonsArray = Array.from(buttons);
buttonsArray.forEach(button => {
  button.style.color = "red";  // 이제 forEach 사용 가능
});

 

 

❌ 오류 나는 예제 (유사 배열을 진짜 배열처럼 쓸 때)

<button class="btn">버튼1</button>
<button class="btn">버튼2</button>
<button class="btn">버튼3</button>

<script>
  const buttons = document.getElementsByClassName("btn");

  // ❌ 여기서 오류가 납니다!
  buttons.forEach(btn => {
    btn.style.backgroundColor = "pink";
  });
</script>

 

❗오류 메시지 예시 (브라우저 콘솔에서)

Uncaught TypeError: buttons.forEach is not a function

 

✅ 올바른 사용법 (배열로 변환)

<script>
  const buttons = document.getElementsByClassName("btn");

  // 배열로 바꾼 뒤 forEach 사용
  const realButtons = Array.from(buttons);

  realButtons.forEach(btn => {
    btn.style.backgroundColor = "pink";
  });
</script>

 

◈ => {}는 function() {}를 더 짧게 쓴 화살표 함수(Arrow Function) 문법.

🔁 비교

✅ 전통적인 함수 표현

const sayHi = function() {
  console.log("안녕!");
};

 

✅ 화살표 함수 표현 (짧게 줄임)

const sayHi = () => {
  console.log("안녕!");
};

 

📌 기본 구조

(매개변수) => {
  실행할 코드
}

 

✨ 더 간단한 줄임

매개변수가 하나일 때는 괄호 생략 가능:

name => {
  console.log(name + "님 안녕하세요");
}

 

코드가 한 줄이고 return만 있다면 {}와 return도 생략 가능:

// 일반 함수
const plus = function(a, b) {
  return a + b;
};

// 화살표 함수 (짧게 줄인 버전)
const plus = (a, b) => a + b;

 

🔒 화살표 함수의 특징 (기본 function과 다른 점)

• this가 다르게 동작함 (고급 개념, 지금은 몰라도 괜찮아요!)
• 짧고 간결한 코드에 적합

 

▶ function과 => (화살표 함수) 중 언제 어떤 걸 쓰는 게 좋은지 상황별로 쉽게 정리

✅ 1. 기본 비교 정리

✅ 2. 언제 function을 쓰면 좋을까?

🔸 일반적인 함수 정의
🔸 this를 직접 다뤄야 할 때
🔸 생성자 함수로 객체 만들 때
🔸 arguments 객체가 필요할 때

 

function showInfo() {
  console.log(this.name); // this가 중요할 때
}

 

✅ 3. 언제 =>를 쓰면 좋을까?

🔸 간단한 함수일 때
🔸 콜백 함수나 반복문 내부에서 쓰일 때
🔸 this를 그대로 유지하고 싶을 때

// 배열의 각 요소를 제곱
const nums = [1, 2, 3];
const squares = nums.map(n => n * n); // 짧고 깔끔

 

// 이벤트 리스너 안에서 this 유지하려고 쓸 때
class Counter {
  constructor() {
    this.count = 0;
    document.getElementById("btn").addEventListener("click", () => {
      this.count++; // function 썼다면 this가 달라졌을 수도 있음
      console.log(this.count);
    });
  }
}

 

🎯 요약