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

HTMLCollection의 ClassName 문제

JavaScript 코드에서 getElementsByClassName()을 사용하여 "block-default" 클래스가 있는 요소를 선택하고 있습니다. ." 그러나 알다시피 클래스는 다른 모든 요소에 대해서만 변경됩니다.

문제는 getElementsByClassName()에서 반환된 HTMLCollection의 특성에 있습니다. DOM의 현재 상태를 반영하는 라이브 컬렉션입니다. 요소의 클래스 이름을 변경하면 컬렉션에서 제거되어 더 이상 선택할 수 없게 됩니다.

해결책: 반복 접근 방식

이 문제를 해결하려면, HTMLCollection을 반복하고 각 요소의 클래스 이름을 개별적으로 변경할 수 있습니다. 이렇게 하면 모든 요소가 업데이트된 클래스를 받게 됩니다.

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

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

대체 해결 방법: 첫 번째 요소만 변경

또는 수정할 수 있습니다 첫 번째 요소의 클래스 이름은 클래스가 변경된 후에도 컬렉션에 남아 있습니다. 수정된 코드는 다음과 같습니다.

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

이렇게 하면 첫 번째 요소의 클래스 이름만 업데이트하면 되며 HTMLCollection에는 "블록 선택" 클래스가 있는 모든 요소가 계속 포함됩니다.

참고: 요소를 반복하는 것은 다음과 같이 많은 요소가 반환될 수 있는 실제 시나리오에 더 나은 솔루션입니다. getElementsByClassName() 및 모든 항목에 대해 작업을 수행해야 합니다.

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