Javascript

DOM 접근 시 알아야 할 HTMLCollection과 Host Environment 🖥️

JANNNNNN 2024. 11. 16. 17:08

이번 글에서는 JavaScript에서 DOM 요소에 접근할 때 마주치게되는 HTMLCollection과 Host Environment(호스트환경)에 대해 알아보겠습니다!

🎯 1. HTMLCollection이란?

HTMLCollection은 DOM API에서 제공하는 유사 배열 객체로, HTML 문서에서 여러 개의 요소를 선택할 때 사용됩니다. 주로 getElementsByTagName(), getElementsByClassName() 같은 메서드로 반환되며, HTML 요소들의 컬렉션을 담고 있습니다.

특징:

  • HTMLCollection은 실시간(live)입니다. 즉, DOM이 변경될 때, HTMLCollection도 그 변화를 즉시 반영합니다.
  • 배열과 비슷하게 생겼지만, 배열이 아닙니다. 배열의 메서드(forEach, map 등)는 사용할 수 없지만, 인덱스로 접근하거나 length 속성은 사용할 수 있습니다

다음은 HTMLCollection을 사용하는 예제입니다. HTML 내 <li> 요소들을 getElementsByTagName()으로 가져와 접근하고, for...of문을 사용해 각 요소의 id 값을 출력하는 코드입니다.

HTML:

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>DOM에 대해 알아보자</title>
</head>
<body>
  <ul id="group">
    <li id="one">1반</li>
    <li id="two">2반</li>
  </ul>
  <script src="dom.js"></script>
</body>
</html>

JavaScript: 

  const group = document.getElementById("group");
  const list = group.getElementsByTagName("li");  // HTMLCollection 반환
  
  console.log(list[Symbol.toStringTag]);  // "HTMLCollection"

  for (let element of list) {
    console.log(element.id);  // "one", "two"
  }

결과:

  • group.getElementsByTagName("li")는 <li> 요소들의 HTMLCollection을 반환합니다.
  • for...of문을 사용해 list 내 각 <li> 요소의 id 속성을 출력할 수 있습니다.

⭐ 중요:

  • HTMLCollection은 배열이 아니라 유사 배열입니다. Array 메서드를 직접 사용할 수 없지만, for...of나 for 루프를 통해 요소에 접근할 수 있습니다.

🎯 3. Host Environment(호스트 환경)이란?

자바스크립트가 실행되는 호스트 환경은 브라우저, Node.js, 또는 다른 자바스크립트 엔진이 실행되는 환경을 의미합니다. 브라우저에서는 HTML, DOM, BOM 등을 처리할 수 있는 API를 제공하고, Node.js에서는 파일 시스템이나 네트워크와 같은 시스템 관련 기능을 제공합니다.

for...of문에서 HTMLCollection과 같은 유사 배열 객체를 순회할 수 있는 이유도 호스트 환경에서 이를 반복 가능한(iterable) 객체로 처리해주기 때문입니다.

🎯 4. Host Environment와 Iterable의 관계

자바스크립트의 호스트 환경은 ECMAScript 스펙을 구현하며, 브라우저와 같은 호스트 환경은 DOM API와 같은 기능을 추가로 제공합니다. 이때 DOM API는 반복 가능한 객체들을 제공하는데, HTMLCollection과 같은 DOM 객체들도 이 규칙을 따릅니다.

for...of문은 자바스크립트 내의 이터러블(Iterable) 객체를 순회하는 구조로, 호스트 환경이 HTMLCollection을 이터러블 객체로 정의해 놓았기 때문에 for...of로 순회할 수 있습니다.

⭐ 헷갈릴만한 부분:

  • 배열처럼 보이지만 HTMLCollection은 진짜 배열이 아니므로 배열의 메서드를 직접 사용할 수 없습니다.
  • for...of문은 호스트 환경에서 제공하는 이터러블 객체를 순회할 수 있도록 ECMAScript 스펙을 따르고 있습니다.

📌 결론

HTMLCollection은 DOM에서 요소를 여러 개 가져올 때 사용하는 유사 배열 객체로, 실시간으로 DOM 변화를 반영하는 특성을 가지고 있습니다. 자바스크립트의 호스트 환경 덕분에, HTMLCollection과 같은 DOM 객체도 이터러블로 동작하며, for...of문을 통해 반복문을 사용할 수 있습니다.

🛠 실무적인 팁

  • HTMLCollection은 실시간으로 DOM 변화를 반영하므로, 대규모 DOM 조작 시 성능 이슈를 고려해야 합니다. 필요하다면 컬렉션을 배열로 변환해서 사용하거나, DOM 접근을 최소화하는 방법을 고려하세요.
  • NodeList와 HTMLCollection은 자주 혼동되지만, NodeList는 반드시 실시간으로 변하지 않으며, 둘의 차이점도 알고 있으면 좋아요 :)
✨오늘의 한마디

HTMLCollection이란, DOM에서 여러 HTML 요소를 유사 배열 형태로 모아둔 실시간 컬렉션이다!