getElementsByClassName을 사용하여 요소 스타일 변경

getElementsByClassName을 사용하면 동일한 클래스 이름을 가진 여러 요소를 선택할 수 있습니다. 주어진 예에서 코드는 해당 div 외부에서 이벤트가 발생할 때 특정 클래스 이름을 가진 모든 div의 배경색을 변경하는 것을 목표로 합니다.

문제 진단

제공된 코드에는 몇 가지 문제가 있습니다.

1. getElementsByClassName의 잘못된 사용: getElementsByClassName() 구문은 단일 DOM 요소가 아닌 일치하는 요소의 컬렉션을 반환합니다. 각 요소의 스타일을 변경하려면 컬렉션을 반복해야 합니다.
2. 잘못된 HTML 구문: 요소의 ID에는 공백을 포함할 수 없으므로 색상 전환기 A 및 색상 전환기 B ID가 유효하지 않게 됩니다. .

솔루션

이러한 문제를 해결하려면 다음 수정된 코드를 사용할 수 있습니다.

window.onload = function() {
  var aElements = document.getElementsByClassName('a');
  var bElements = document.getElementsByClassName('b');

  document.getElementById('A').addEventListener('mouseover', function() {
    changeColor(aElements, 'red');
  });

  document.getElementById('B').addEventListener('mouseover', function() {
    changeColor(bElements, 'blue');
  });
};

function changeColor(elements, color) {
  for (var i = 0; i 
이 수정된 코드에서는:
getElementsByClassName에서 반환된 컬렉션을 반복하여 일치하는 모든 요소의 스타일을 변경합니다.
공백 없이 올바른 ID를 사용합니다. 트리거 요소를 식별합니다.
changeColor 함수를 정의하여 원하는 색상 변경을 요소에 적용합니다.
추가 참고사항
 최적의 성능을 위해 매번 다시 쿼리하는 대신 요소 컬렉션을 캐싱하는 것이 좋습니다. 또한 스타일 변경을 위해 CSS 클래스와 이벤트 리스너를 사용하는 것이 인라인 속성보다 더 효율적입니다.