[Javascript]HTMLCollection을 반환하는 주요 DOM 메서드

HTMLCollection을 반환하는 주요 DOM 메서드

1. document.getElementsByTagName(tagName)
   • 특정 태그 이름을 가진 모든 요소를 선택합니다.
   • 예: document.getElementsByTagName('div')
     → <div> 태그를 모두 포함하는 HTMLCollection 반환.
2. document.getElementsByClassName(className)
   • 특정 클래스를 가진 모든 요소를 선택합니다.
   • 예: document.getElementsByClassName('item')
     → 클래스가 item인 모든 요소를 포함하는 HTMLCollection 반환.
3. document.forms
   • 현재 문서의 모든 <form> 요소를 선택합니다.
   • 예: document.forms
     → 문서의 모든 <form> 태그를 포함하는 HTMLCollection 반환.
4. document.images
   • 현재 문서의 모든 <img> 요소를 선택합니다.
   • 예: document.images
     → 모든 이미지 요소를 포함하는 HTMLCollection 반환.
5. document.links
   • 현재 문서의 모든 <a> 요소 중 href 속성이 있는 것만 선택합니다.
   • 예: document.links
     → 링크 요소만 포함하는 HTMLCollection 반환.
6. document.scripts
   • 현재 문서의 모든 <script> 요소를 선택합니다.
   • 예: document.scripts
     → 모든 <script> 태그를 포함하는 HTMLCollection 반환.
7. document.getElementsByName(name)
   • 특정 name 속성을 가진 모든 요소를 선택합니다.
   • 예: document.getElementsByName('username')
     → name 속성이 username인 모든 요소를 포함하는 HTMLCollection 반환.

 

HTMLCollection의 특징

1. 실시간 라이브 업데이트
   • HTMLCollection은 문서 구조가 변경되면 자동으로 업데이트됩니다.
     예: DOM에 요소를 추가하거나 삭제하면 HTMLCollection도 즉시 반영됩니다.
2. 배열처럼 접근 가능
   • 인덱스를 사용하여 특정 요소에 접근할 수 있습니다.
      

      

     let items = document.getElementsByClassName('item');

     console.log(items[0]); // 첫 번째 요소
3. 배열 메서드 미지원
   • 배열처럼 보이지만 실제 배열이 아니므로 forEach, map, filter 같은 배열 메서드를 사용할 수 없습니다.
   • 대신 for 또는 for...of 루프를 사용하거나, 배열로 변환해야 합니다.
      

     let itemsArray = Array.from(document.getElementsByClassName('item'));

     itemsArray.forEach(item => console.log(item));
4. length 속성 지원
   • 컬렉션에 포함된 요소의 개수를 반환합니다.
      

     console.log(items.length); // HTMLCollection에 포함된 요소의 수

---

HTMLCollection 사용 예제

<ul id="list">
  <li class="item">Item 1</li>
  <li class="item">Item 2</li>
  <li class="item">Item 3</li>
</ul>

<script>
  let items = document.getElementsByClassName('item');
  console.log(items.length); // 3
  console.log(items[1].textContent); // "Item 2"
</script>

---

HTMLCollection은 간단한 작업에 적합하지만, 최신 DOM 작업에서는 querySelectorAll로 반환되는 NodeList를 사용하는 것이 더 유연하고 강력합니다.