[ JavaScript ] 자바스크립트 기본 문법 | HTMLCollection

이미지 출처 :    https://commons.wikimedia.org/wiki/File:JavaScript-logo.png

 

 

 

 

 

 

해당 포스팅은 생활코딩의 이고잉 님의 강의를 기반으로 개인 공부용으로 정리한 포스팅임을 미리 알립니다.

 

 

 

---

 

 

자바스크립트 기본 문법  ::  HTMLCollection

 

 

HTMLCollection

 

 

 

 

HTMLCollection은 리턴 결과가 복수인 경우에 사용하게 되는 객체입니다.

 

이는 유사배열로 배열과 비슷한 사용방법을 가지고 있지만 배열은 아닙니다.

 

 

 

 

HTMLCollection 은 아래와 같이 구현되어 있습니다.

 

 

 

interface HTMLCollection {
  readonly attribute unsigned long   length;
  Node               item(in unsigned long index);
  Node               namedItem(in DOMString name);
};

 

 

 

HTMLCollection 의 목록은 실시간으로 변경될 수 있습니다.

 

 

 

아래 예제 코드를 보기 전에,

 

console.group() 과 console.groupEnd() 를 설명드리자면,

 

 

console 로그로 보이는 값을 그룹화 시키는 메소드들입니다.

 

 

console.group('이름') 으로 그룹의 시작을 알리고,

 

 

console.groupEnd() 로 그 그룹을 끝냅니다.

 

 

 

아래 예제를 보도록 하겠습니다.

 

 

 

 

 

<!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>

 

 

 

코드의 실행 결과는 아래와 같습니다.

 

 

 

 

 

 

 

각각 before 와 after 로 그룹화된 것을 확인할 수 있습니다.

 

 

그건 다음으로 제쳐두고, 안에 있는 내용을 살펴보도록 하겠습니다.

 

 

before 그룹을 보면, li 태그를 가진 것들을 출력하고 있습니다.

 

 

 

after 그룹을 보면, parentNode.removeChild() 메소드가 보입니다.

 

 

lis[1] 의 부모 노드의 자식 lis[1] 을 삭제한다는 의미 인데, 아마 자세한 것은

 

나중에 포스팅으로 다룰 것 같습니다.