power-girl0-0

[DOM] HTMLCollection 본문

언어/Javascript

[DOM] HTMLCollection

power-girl0-0 2021. 2. 9. 15:35
728x90

생활코딩 웹브라우저 javascript를 참고하여 공부하였습니다.

스스로 공부한 것을 정리하고 복습하기 위한 목적으로 작성하였습니다.

( 출처 :  https://opentutorials.org/course/743inf.run/pBzy)

 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>

console.group()으로 시작해서 console.groupEnd() 사이에 있는 코드를 그룹핑해서 출력해준다. 

 

결과

 

 

728x90
저작자표시

'언어 > Javascript' 카테고리의 다른 글

[ Element ] Element 객체  (0) 2021.02.09
[DOM] jQuery 객체  (0) 2021.02.09
[DOM] HTML Element  (0) 2021.02.09
[DOM] 제어 대상을 찾기  (0) 2021.02.09
[DOM] jQuery  (0) 2021.02.09
'언어/Javascript' Related Articles more
Comments