해당 포스팅은 생활코딩의 이고잉 님의 강의를 기반으로 개인 공부용으로 정리한 포스팅임을 미리 알립니다.
자바스크립트 기본 문법 :: 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] 을 삭제한다는 의미 인데, 아마 자세한 것은
나중에 포스팅으로 다룰 것 같습니다.
'Archive > Develop' 카테고리의 다른 글
| [ JavaScript ] 자바스크립트 기본 문법 | Element 객체 (0) | 2021.02.07 |
|---|---|
| [ JavaScript ] 자바스크립트 기본 문법 | jQuery 객체 | jQuery API | jQuery map (0) | 2021.02.07 |
| [ JavaScript ] 자바스크립트 기본 문법 | HTMLElement (0) | 2021.02.07 |
| [ JavaScript ] 제어 대상 찾기 - 제이쿼리(jQuery) (0) | 2021.02.07 |
| [ JavaScript ] 제어 대상 찾기 - getElementById, getElementsByClassName, getElementsByTagName (0) | 2021.02.07 |