웹브라우저 JavaScript

HTMLCollection

HTMLCollection은 리턴 결과가 복수인 경우에 사용하게 되는 객체다. 유사배열로 배열과 비슷한 사용방법을 가지고 있지만 배열은 아니다. 

HTMLCollection

HTMLCollection의 목록은 실시간으로 변경된다. 아래 코드를 보자.

<!DOCTYPE html>
<html>
<body>
<ul>
    <li>HTML</li>
	<li>CSS</li>
	<li id="active">JavaScript</li>
</ul>
<script>
console.group('before');
var lis = document.getElementsByTagName('li');
for(var i = 0; i < lis.length; i++){
	console.log(lis[i]);
}
console.groupEnd();
console.group('after');
lis[1].parentNode.removeChild(lis[1]);
for(var i = 0; i < lis.length; i++){
	console.log(lis[i]);
}
console.groupEnd();
</script>
</body>
</html>

결과

 

댓글

댓글 본문
  1. 헤밍웨이
    220825 감사합니다!
  2. 임앤강
    2022-02-08 감사합니다~
  3. 드림보이
    2021.12.22. HTMLCollection 파트 수강완료
  4. 2021.12.21 수강
  5. labis98
    20210910 좋은 강의 감사합니다.
  6. sonyjun
    흠.. 그냥 call by reference 라는 말인가
  7. 현미쓰
  8. anne
    완료
  9. nurunzii
    완료
  10. 한강
    HTMLCollection 객체 잘 배웠습니다.~~^^!
    200629
  11. 김진욱
    완료
  12. 쑤우
    완료. 감사합니다~
  13. Useok
  14. ㅎㅅㅁ
    200204 restart
  15. 굼벵이
    완료
  16. 모든일이일사천리
    완료 : 19-11-13 9PM
  17. 2019-10-14 7:29pm 완료
  18. 정홍
    완료
  19. 류석현
    객체에 대한 이해도가 떨어져서 갈수록 어려워지네요..
    유사배열에 대한 단어도 이해가 너무 안되구요..
    제가 수업집중을 너무 안했네요 다시 정주행 하고 오겠습니다!
  20. '실시간 반영된다' 라는 것의 의미가.. 일반 배열과 뭐가 다르지 헷갈렸는데
    lis의 아이템을 수정하는게 실시간으로 반영된다는 말이 아니었네요!

    lis[1].parentNode.removeChild(lis[1]);

    이 코드처럼, 노드에 변경사항이 있는 경우에 그 변경사항이
    변수에 담긴 HTMLCollection 데이터에서도 함께 반영된다는 의미같아요.

    잘봤습니닷:-)
  21. 미완성
    20190109
  22. JuicyFresh
    컬렉션을 받고 나서 삭제/추가 하면 컬렉션에 반영이 되기 때문에 재 조회 할 필요가 없다.
  23. SlowStarter
    감사합니다!
  24. 생선과고양이
    20180425 감사합니다
  25. An TaeHyeon
    18-01-25 수강완료!
    강의록 공유합니다.
    https://goo.gl/XSRWgo
  26. 박인호
    12-28
    수강완료.
    HTMLCollection 개체의 목록은
    따로 변수에 담아 재 조회 하지 않아도 결과가 실시간으로 반영된다.
  27. 김민근
    <script>
    console.group('before');
    var lis = document.getElementsByTagName('li');
    for(var i = 0; i < lis.length; i++){
    console.log(lis[i]);
    }
    이 코드에서 볼 수 있듯이 before상태에서는 var lis 에 할당하는 것처럼 lis변수에 for문을 돌려서 담지요.
    하지만, HTMLCollection은 실시간으로 바뀌기 때문에
    console.group('after');
    lis[1].parentNode.removeChild(lis[1]);
    코드를 이용한 뒤(1개의 li를 삭제하는 코드)에
    for(var i = 0; i < lis.length; i++){
    console.log(lis[i]);
    }
    위 코드처럼 lis를 창에 바로 띄우면, 한 개의 li가 삭제된 상태로 나오게 됩니다.
    즉, 변경된 값에 대하여 따로 변수에 담지 않아도 된다는 말인듯 합니다.
  28. 뭐가 특별한가했더니 프로그래밍초보님 말보니 이해되네요
    대화보기
    • 프로그래밍초보
      잘 모르지만 제가 이해한 대로 답변합니다.

      강의영상에서 HTMLCollection은 실시간으로 변경되기 때문에 다시조회할 필요가 없다고 하였습니다.

      이때 조회 한다는 것은
      11번째줄) var lis = document.getElementsByTagName('li'); 에서 lis에 HTMLCollection객체를 담는다는 것이고,

      재조회 한다는 것은
      17번째줄) lis[1].parentNode.removeChild(lis[1]); 을 통해서 lis[1]이 삭제되었는데, 이 삭제된 상태를 적용하기 위하여 다시금
      var lis = document.getElementsByTagName('li'); 를 사용해서 lis에 HTMLCollection객체를 담을 필요가 없다는 뜻인 것 같습니다.

      즉 실시간으로 삭제된것이 HTMLCollection객체에 적용되기 때문에 굳이 재조회따위 필요없다는 것이죠^^
      대화보기
      • Sangmook Kim
        170728 완료
      • crable
        감사합니다
      • 허접
        html콜렉션을 유사배열에서 배열로 만들고 싶으시면

        Array.prototype.slice.call(html콜렉션)으로 하시면 됩니다.
      • woola
        리턴 결과가 복수인경우에 사용되기보단 document.getElements~~() 와 같은것은 복수형태로 반환되어서 그런거같고, document.getElements~~()을 사용하면 반환되는 객체가 HTMLCollection 이라고 알고있습니다. 또한 HTMLColleciton은 유사배열객체이기때문에 속성과 메서드로 접근도 되고 length가 사용이 가능하다고 알고있습니다.
        W3C원문 참고 : https://www.w3.org......506
      • ckocko
        실시간으로 변경된다는것이 콘솔에서 바꾸면 바로 화면에 적용되서 그렇단 말인가요?? 따로 html에서 바꿀 필요 없이..?? ㅠㅠㅠㅠ
      • 유유
        감사합니다!
      • hyuna
        감사합니다
      • 안나옴
        왜안나와요
      • tachyon
        감사합니다
      • yihsang
        감사합니다.
      • JustStudy
        2017.07.08 금
        고맙습니다 3.
      • JustStudy
        2016.06.30
        고맙습니다 2.
      • 이주환
        2016. 04. 27
        잘보고갑니다~!
      • JustStudy
        고맙습니다
      • SK Kim
        console.log 대신 console.dir로 하면 결과가 설명한대로 나옵니다...라고 할려다가..
        console.log으로 하고 페이지 리로드를 하면 가끔식 dir 내용이 나오네요.
      • WayneKing
        HTMLCollection의 목록은 실시간으로 변경된다. 라고 하셨는 데,
        정확히 어떤 의미를 전달하는 건가요?
        C++ 백터처럼 인덱스 1을 삭제해도 자동으로 데이터가 정리되는 것을 말하는 건가요?

        세개의 유사배열로 구성된 lis의 1번 인덱스을 삭제했는 데, for문으로 실행했을 때 에러가 나지 않고 잘 실행되는 걸 보면 lis[2] 값이 lis[1]로 내부적으로 넘어간 부분을 말하는 건가요?
      • 코딩!
        역시 재밌게 잘 들었습니다.
      • ironmask
        // will 님에게
        var lis = document.getElementsByTagName('li'); 에서
        lis 변수는 그냥 document.getElementsByTagName('li') 에 의해 값이 대입된 것이고,
        상속하고는 관련이 없어 보입니다.

        HTMLCollection은 틀이긴 하나, HTMLCollection 자체가 바뀌는 것은 아니고,
        lis 라는 변수가 HTMLCollection라는 녀석의 틀을 가지게 된 것이라고 생각하시면 될 듯합니다.

        틀이란 것이 객체지향 프로그래밍에서 의미하는 Class 라는 것과 비슷한데 참고해보셔도 좋을 듯 합니다.
        (C++ 혹은 JAVA 를 참고)
      • will
        의견//
        HTMLCollection은
        var lis = document.getElementsByTagName('li');
        위 코드에서 상속해줘서 lis라는 변수를 만들기위한 틀 같은거 아닌가요?
        HTMLCollection이 lis라는 특정한 변수를 만들기위한 틀이라면

        HTMLCollection이 실시간으로 바뀐다고 하기엔 무리가 있지않나요?
      • 아이린
        잘보았습니다.^-^b 항상 좋은 강의 감사합니다.
      • 케이
        before
        <li>​HTML​</li>​
        <li>​CSS​</li>​
        <li id=​"active">​JavaScript​</li>​
        after
        <li>​HTML​</li>​
        <li id=​"active">​JavaScript​</li>​

        제 로그는 이렇게 뜨네요
        console의 로그는 값을 표현하지 않나봐요
      버전 관리
      egoing
      현재 버전
      선택 버전
      graphittie 자세히 보기