getElementsByClassName()이 다른 모든 클래스만 변경하는 이유는 무엇입니까?

원치 않는 클래스 변경 패턴: 다른 모든 클래스가 영향을 받음

JavaScript에서 getElementsByClassName()을 사용하는 동안 문제에 직면하게 됩니다. 모든 요소의 클래스를 변경하려고 하면 다른 모든 클래스만 수정되는 문제가 발생합니다.

근본 원인: HTMLCollection 수정

이 문제는 getElementsByClassName()에서 반환된 HTMLCollection의 특성에 있습니다. 컬렉션 내의 요소 클래스를 변경하면 컬렉션 자체가 업데이트되고 해당 요소는 더 이상 포함되지 않습니다. 이는 컬렉션을 반복할 때 대체 요소를 효과적으로 건너뛰는 것을 의미합니다.

해결책: 배열을 통한 반복

이 문제를 해결하려면 진행하면서 컬렉션을 수정하는 대신 원본 컬렉션의 배열을 사용하세요. 이렇게 하면 이전 수정 사항에 관계없이 모든 요소에 클래스 변경 사항을 적용할 수 있습니다.

For 루프를 사용하여 업데이트된 코드:

var blockSet = document.getElementsByClassName("block-default");
var blockSetLength = blockSet.length;

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

참고:

• 각 요소의 클래스를 개별적으로 변경하는 대신 for 루프를 사용할 수 있습니다. 요소를 반복하고 클래스를 변경합니다.
• 이 업데이트된 코드는 각 반복마다 blockSet 배열의 첫 번째 요소에 "블록 선택" 클래스를 할당합니다.
• 배열 사용 , 반복 중에 컬렉션이 수정되는 문제를 방지할 수 있습니다.

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