Notice
Recent Posts
Recent Comments
Link
«   2025/01   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
Tags more
Archives
Today
Total
관리 메뉴

FU11M00N

[ JavaScript ] JS HTMLCollection 본문

SUA 정보보안/JavaScript

[ JavaScript ] JS HTMLCollection

호IT 2021. 2. 8. 02:52

 

이미지 출처 :    https://www.inflearn.com/course/javascript-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EA%B0%95%EC%A2%8C#

 

생활코딩의 이고잉 님의 강의를 기반으로 개인 공부용으로 정리한 포스팅입니다.

 

 

 

 

 

 

 

 

 

 

 

- 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] 을 삭제한다는 의미 입니다.

 

 

 

 

SUA 정보보안 멘토링에 참여하고 있습니다.

'SUA 정보보안 > JavaScript' 카테고리의 다른 글

[ JavaScript ] Element 객체  (0) 2021.02.08
[ JavaScript ] jQuery 객체 , 체이닝 , jQuery 객체 API  (0) 2021.02.08
[ JavaScript ] JS HTMLElement , DOM Tree  (0) 2021.02.08
[ JavaScript ] JS 제어 대상 찾기 : 제이쿼리(jQuery)  (0) 2021.02.07
[ JavaScript ] JS 제어대상 찾기 querySelector , querySelectorAll  (0) 2021.02.07
'SUA 정보보안/JavaScript' Related Articles more
Comments