웹브라우저 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. 김민근
    <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가 삭제된 상태로 나오게 됩니다.
    즉, 변경된 값에 대하여 따로 변수에 담지 않아도 된다는 말인듯 합니다.
  2. 뭐가 특별한가했더니 프로그래밍초보님 말보니 이해되네요
    대화보기
    • 프로그래밍초보
      잘 모르지만 제가 이해한 대로 답변합니다.

      강의영상에서 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콜렉션)으로 하시면 됩니다.
      • 리턴 결과가 복수인경우에 사용되기보단 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의 로그는 값을 표현하지 않나봐요
      • 메이플가이
        뻐꾸기님 감사합니다.

        한두달전에 자바스크립트를 듣다 중단하고, 지금 다시 듣는중입니다.
        제 밑에 댓글을 제가 쓴 줄을 기억도 못할 정도로 정신이 없네요.

        두번들을 때는 더 이해가 가는 편입니다. 제가 왜 저런 댓글을 달았나 아리송할 정도로요.

        그때 가장 궁금했던 부분, 그리고 지금 궁금한 부분은 아마도
        코딩은 텍스트에디터에서 전부 끝내고 구현하는 것이라는 생각에서 비롯해,
        요소 검사에서 DOM을 이용해 console 등을 사용하는 것이 헷갈리나봅니다.
        앞으로 강의를 더 듣고 완주해야 그림이 잡힐 것 같네요.

        말씀대로 정말 귀중한 강의를 필요한 사람들은 너무나 고맙게 사용하고 있습니다.
        큰 차이점이라면.. 말씀하신대로 온라인 강의는 정말 큰 열정이 없다면, 저같이 일을 하면서 듣는 사람에겐 수강 중 끈이 풀리기 쉽습니다. 전 한국에서 휴가 때 강의를 열심히 들었으나 다시 외국에서 일을 시작하면서 한달 넘게 강의를 듣지 못했거든요. 물론 강의가 오프라인으로 이루어졌다면 듣는 것 자체가 불가능했겠지요 ^^;
        온라인강의의 무궁무진한 가능성과 동시에 집중도의 문제 등은 같이 가는 작용점인 거 같습니다.
        그래서 여전히 재래식 학원이 많은 것이 이유겠지요 ^^
        대화보기
        • 뻐꾸기2
          배우고 있는 사람입니다. 우리나라 노동부교육도 이와같은 방법으로 교육을 해줬으면 좋겠다라는 생각을 합니다.
          지금의 노동부교육은 너무 비싸게 받고 교육효과는 없는 것 같습니다. 오프라인이라 시간적으로 자유가 없고 학원가는 시간등 낭비가 많은 것 같습니다. 이곳과 같이 만들고 수정/개선하면서 차츰 발전된 사이트로 발전하는 방식으로 했으면 좋겠습니다.

          배우는 학생으로써 답변입니다. 참고로 엑셀VBA중급정도 합니다. 이것과 유사해서 이해가 잘 되네요.

          [ 질문1에 대한 답변 ]
          컬렉션은 배열은 아니지만 배열과 같이 처리한다. ---> 이것은 약속과 같은 것이 아닌가 생각합니다.
          '사과'라는 것이 있어서 "사과"라고 하자!라고 했다면 그냥 사과라고 약속하고 외우는 것이지요.
          왜 "사과"라고 하지? 이럴 필요가 없지 않나 생각합니다.

          [ 질문2에 대한 답변 ]
          1) 엘리먼트를 삭제할 때는 이렇게 한다는 것을 알려주고...
          2) 객체를 어떻게 다루는지에 대한 설명정도로 생각하면 되지 않을까 생각합니다.

          객체를 콘솔에 로그하는 것을 나타냈지만...
          객체의 모양(색깔,굵기,언더라인등)을 바꾼다거나
          객체의 내용을 수집한다거나...(파일형태로 li인 테그롤 둘러싸인 목록을 파일로 만들 수 있겠죠)
          객체가 선정되면... 그 객체를 가지고 요리조리 요리를 하는 것입니다.
          자동차란 객체를 선정했다면, 엑셀밟아 속도 조절하고, 운전대를 조작하여 좌우로 방향전환하고...
          하듯이 객체를 요리한다는 것입니다. 자동차의 색깔도 다른 색으로 바꿔줄 수 있고...
          자동차 타이어도 다른 것으로 교환도 할 수 있지요.
          http://opentutorials.org......553 객체지향프로그램
          이곳에서는 문법, 즉 말을 하는 방법을 배우고...구체적인 것은 문법에 의해 개인들이 사전을 보고 찾아서
          구체적으로 프로그램을 하는 것입니다.
          http://opentutorials.org......533 이곳은 튜토리얼(문법)을 가르치고
          레퍼런스(사전)은 따로 있습니다. 링크를 가서 설명들으시면 아실듯 합니다.
        • 메이플가이
          시간적 순으로 그냥 이해되는대로 듣는 중입니다.
          자바스크립트는 처음이고요.

          궁금점이 있어 질문 남깁니다. 이번 HTMLCollection 강의 목적이 궁금합니다. 강의 내용에 따르면,
          배열이지만 정확히 배열은 아니고 유사배열이다. <-- 솔직히 크게 이해 못하겠습니다.
          라는 점과
          li eliment 하나를 삭제하고 다시 그룹핑하여 결과를 출력하는 것.
          어떤 의미가 있는지요 ? 머리 속이 엉키는 느낌이라.. ㅎㅎ 자바스크립트로 삭제하는 방법을 가르쳐주시는 것인지요 ?
        • WhiteDoong
          이해하기가 좀 어렵네요 ㅜㅜ 자꾸 봐야겠네요
        • 규빈이아빠
          잘 들었습니다^^
        • Sirhc
          꿀팁입니다 ^__________^
        • somdari
          console.group 유용하겠는데요.. 잘 받아먹을께요..^^;
        버전 관리
        egoing
        현재 버전
        선택 버전
        graphittie 자세히 보기