`getElementsByClassName()`을 사용하여 클래스 이름을 변경하면 JavaScript의 다른 모든 요소에만 영향을 미치는 이유는 무엇입니까?

className 다른 모든 클래스 문제 변경

문제

JavaScript에서 getElementsByClassName() 메서드는 요소가 포함된 HTMLCollection을 반환합니다. 지정된 CSS 클래스를 공유합니다. 그러나 이러한 요소에 클래스 변경 사항을 적용하면 대체 클래스만 영향을 받는 것으로 관찰되었습니다.

원인

이 문제는 getElementsByClassName()에서 반환된 HTMLCollection이 라이브 컬렉션이기 때문에 발생합니다. 즉, 클래스 이름 수정과 같이 DOM을 변경하면 컬렉션 자체가 수정됩니다.

className 속성이 수정되면 해당 요소가 컬렉션에서 제거됩니다. 이로 인해 컬렉션의 크기가 줄어들고 이후에 해당 인덱스를 사용하여 동일한 요소에 액세스하려고 하면 대체 요소를 건너뛸 수 있습니다.

해결책

이 문제를 해결하려면 두 가지 잠재적인 방법이 있습니다. 솔루션:

1. 첫 번째 요소의 ClassName만 수정

전체 HTMLCollection을 반복하고 각 요소의 className을 변경하는 대신 첫 번째 요소의 className만 수정합니다.

for (var i = 0; i < blockSetLength; i++) {
  blockSet[0].className = "block-selected";
}

2. 정적 배열과 같은 데이터 구조 사용

라이브 컬렉션을 반환하는 getElementsByClassName()을 사용하는 대신 정적 배열과 같은 데이터 구조를 만듭니다. Array.from() 함수를 사용하여 HTMLCollection을 일반 배열로 변환하거나, 수동으로 배열을 만들고 HTMLCollection 요소로 채워서 수행할 수 있습니다.

const blockSetArray = Array.from(blockSet);

for (var i = 0; i < blockSetArray.length; i++) {
  blockSetArray[i].className = "block-selected";
}

위 내용은 `getElementsByClassName()`을 사용하여 클래스 이름을 변경하면 JavaScript의 다른 모든 요소에만 영향을 미치는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!