요소들의 접근에 대해서

Q.

어떤 자바스크립트 코드가 있다. 그런데 여기서,
// children으로 획득하는 HTMLCollection은 배열과 비슷한 특성을 갖지만 그 자체가 배열은 아니기 때문에 배열의 탐색기능을 활용하기 위해서는 배열로 변환해야 한다.
const childrenArr = Array.from(children);
console.log(childrenArr);

이 부분에서, children으로 가져온 정보를 childrenArr이란 배열로 옮기게 되는데, 이렇게 옮겨진 정보로도 원래 정보가 접근할 수 있던 html 요소들에 접근할 수 있는 것인가?

 

A.

네, childrenArr 배열로 옮겨진 정보를 통해서도 원래 children이 접근할 수 있었던 HTML 요소들에 접근할 수 있습니다.

Array.from(children)은 children HTMLCollection의 각 요소에 대한 얕은 복사(shallow copy)를 생성하여 새로운 배열 childrenArr을 만듭니다. 즉, childrenArr에는 원본 HTML 요소들에 대한 참조가 담기게 됩니다.

따라서 childrenArr의 각 요소를 통해 해당 HTML 요소의 속성을 변경하거나 내용을 조작하는 등의 작업을 수행하면, 실제 문서에 반영됩니다. 예제 코드에서 childrenArr.forEach 루프 내에서 각 요소의 배경색을 변경하는 부분이 이를 보여줍니다.

 

주의할 점:

얕은 복사: Array.from은 얕은 복사를 수행하므로, 만약 HTMLCollection 내의 요소가 중첩된 객체(예: 다른 HTMLCollection)를 포함하는 경우, 중첩된 객체 자체는 복사되지 않고 참조만 복사됩니다. 중첩된 객체를 변경하면 원본과 복사본 모두에 영향을 미칩니다.
Live NodeList: children과 같은 일부 HTMLCollection은 'live' 상태입니다. 즉, 문서의 구조가 변경되면 자동으로 업데이트됩니다. 이러한 경우, childrenArr은 변경 사항을 즉시 반영하지 않을 수 있습니다. 필요에 따라 Array.from을 다시 호출하여 최신 상태를 가져와야 할 수도 있습니다.

 

요약:

childrenArr은 원본 HTML 요소들에 대한 참조를 담고 있습니다.
childrenArr을 통해 HTML 요소들을 조작하면 실제 문서에 반영됩니다.
얕은 복사 및 Live NodeList의 특성에 유의해야 합니다.