`className` 변경이 HTMLCollection의 다른 모든 요소에만 영향을 미치는 이유는 무엇입니까?

className은 다른 모든 클래스만 변경

이 코드 조각에서는 className 속성이 다른 모든 요소에 대해서만 변경되는 문제가 발생합니다. 컬렉션에서. 목표는 이 동작의 원인을 이해하고 해결책을 찾는 것입니다.

제공된 코드는 getElementsByClassName() 메서드를 활용하여 "block-default" 클래스가 있는 HTML 요소를 검색합니다. 그런 다음 컬렉션에 있는 각 요소의 className 속성을 "블록 선택"으로 수정합니다. 그러나 결과적으로 대체 요소만 업데이트되고 다른 요소는 원래의 "block-default" 클래스가 남게 됩니다.

원인은 HTMLCollections의 특성에 있습니다. 이러한 컬렉션은 실시간이며 DOM의 현재 상태를 반영합니다. 요소의 className 속성이 수정되면 컬렉션 자체도 영향을 받습니다. 특히, 수정된 요소가 목록에서 제거되므로 컬렉션의 크기가 줄어듭니다.

이 문제를 해결하려면 컬렉션 요소에 대한 이후 변경 사항이 나머지 요소의 인덱스에 영향을 미친다는 점을 기억하는 것이 중요합니다. 해결책은 첫 번째 요소의 className만 일관되게 변경하는 것입니다.

한 가지 방법은 컬렉션을 반복하고 첫 번째 요소를 반복적으로 수정하는 것입니다.

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

이 접근 방식을 사용하면 첫 번째 요소가 일관되게 유지됩니다. 컬렉션 변경 사항에 관계없이 업데이트됩니다.

또는 스프레드 연산자를 사용하면 HTMLCollection을 배열로 변환하여 유연성을 높일 수 있습니다.

var blockArray = [...blockSet];

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

두 경우 모두 첫 번째 요소의 className만 수정하면 컬렉션에 있는 모든 요소의 클래스를 변경하는 원하는 결과를 얻을 수 있습니다.

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