웹브라우저 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. 유유
    감사합니다!
  2. 감사합니다
  3. 안나옴
    왜안나와요
  4. tachyon
    감사합니다
  5. yihsang
    감사합니다.
  6. JustStudy
    2017.07.08 금
    고맙습니다 3.
  7. JustStudy
    2016.06.30
    고맙습니다 2.
  8. 이주환
    2016. 04. 27
    잘보고갑니다~!
  9. JustStudy
    고맙습니다
  10. SK Kim
    console.log 대신 console.dir로 하면 결과가 설명한대로 나옵니다...라고 할려다가..
    console.log으로 하고 페이지 리로드를 하면 가끔식 dir 내용이 나오네요.
  11. WayneKing
    HTMLCollection의 목록은 실시간으로 변경된다. 라고 하셨는 데,
    정확히 어떤 의미를 전달하는 건가요?
    C++ 백터처럼 인덱스 1을 삭제해도 자동으로 데이터가 정리되는 것을 말하는 건가요?

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

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

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

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

    제 로그는 이렇게 뜨네요
    console의 로그는 값을 표현하지 않나봐요
  17. 메이플가이
    뻐꾸기님 감사합니다.

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

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

    그때 가장 궁금했던 부분, 그리고 지금 궁금한 부분은 아마도
    코딩은 텍스트에디터에서 전부 끝내고 구현하는 것이라는 생각에서 비롯해,
    요소 검사에서 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 자세히 보기