오늘은 htmlcollection에 대해 포스팅 해보려 한다.

HTMLcollection이란?

htmlCollection은 자바스크립트를 사용하면서 html요소를 리턴 받을때 볼 수 있는 유사배열이다.

사실 이 htmlCollection은 복수의 요소를 리턴 받을때 발생하는데, 리턴 받은 html요소가 하나일 경우, htmlElement라 부르게 된다. 보통 querySelector, getElementById 혹은 ClassName으로 html을 지정하고, console.log()를 사용 할 경우 볼 수 있다.

어떻게 사용하는가?

htmlCollection은 유사배열이기에, 배열에서 사용 되는 method를 사용할 수 없다.
때문에 처음 htmlCollection을 접하면 난감할 수 있다.

하지만 htmlCollection은 생각보다 유용하게 쓰인다.
보통 index를 지정하지 않고 getElementClassName을 사용해서 해당 className을 가지는 요소를 전부 collection으로 받고, 특정한 메서드를 사용해서 가공을 한다.

이때 사용 되는 메서드가 바로 Array.from이다.
htmlCollection은 index를 가지고 있고, length속성을 가지고 있기에 Array.from을 사용해서 배열로 만들 수 있다.

이전 포스팅에서 사용 된 코드를 다시 가져와보면,

const deleteId = () => {
  const searchedList = document.getElementsByClassName("searched-list");
  Array.from(searchedList).forEach((list) => {
    searchBox.removeChild(list);
  });
  searchBox.classList.remove("showing");
};

getElementByClassName으로 searched-list를 클래스로 가지는 요소들을 전부 지정하고, htmlCollection을 리턴 받는다.

리턴 받은 유사배열을 Array.from으로 배열로 만든 다음, forEach로 removeChild를 모든 아이템에 적용 시키는 로직이었다.

또 한가지의 사용법은, 해당 html의 node에 접근 할 수 있다는것이다.
htmlElement의 경우는 해당 html의 노드에 접근 할 수 없었지만, htmlCollection의 경우는 index를 지정하여 node에 접근 할 수 있었다.

물론 이는 배열로 만든 다음에도 접근이 가능했기 때문에, 만약 html요소의 innerText등 곧바로 접근하기 힘든 값이 필요 하다면 htmlCollection을 사용하는것도 고려해보는것이 좋을것이다.