Languages/Java Script

[Js] HTML Collection | DOM | javascript

모든 포스팅은 인프런 [생활코딩] 자바스크립트 강의의 내용을 담고 있으며

출처는 아래의 주소로 "egoing Lee"님의 자료입니다.

상업적인 의도가 아닌 공부한 것을 정리해놓는 목적으로 포스팅 한 것입니다.

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#

웹브라우저 Javascript (자바스크립트) - 인프런

생활코딩 자바스크립트 강좌 입니다. 웹브라우저를 직접 제어할 수 있는 자바스크립트 레퍼런스를 공부해 봅니다. 초급 웹 개발 프로그래밍 언어 JavaScript 온라인 강의 자바스크립트 강좌

www.inflearn.com

HTMLCollection

HTMLCollection은 리턴 결과가 복수인 경우에 사용하게 되는 객체이다. 유사배열로 배열과 비슷한 사용방법을 가지고 있지만 배열은 아니다.

HTMLCollection

Document Object Model HTML

1.6.1. Property Attributes HTML attributes are exposed as properties on the element object. The DOM naming conventions always determine the name of the exposed property, and are independent of the case of the attribute in the source document. The data type

www.w3.org

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]);// CSS를 삭제한 것과 동일 한 것. 즉 li의 2번째를 삭제
for(var i = 0; i < lis.length; i++){
    console.log(lis[i]);
}
console.groupEnd();
</script>
</body>
</html>

위에 코드중에서 console.group 과 console.groupEnd의 역할은 그 사이에 있는 값들을 콘솔에서 출력시킬 때, 그 값을 한번에 묶어서(그룹화) 아래와 같이 출력시켜주는 용도로 사용되는 메소드이다.

결과는 아래와 같이 출력된다.

즉 목록이 삭제하는 것에 대해 즉시, 변경 되었음을 확인할 수 있다.

'Languages > Java Script' 카테고리의 다른 글

[Js] Element 객체 \| Node \| 식별자 \| 조회 \| 엘리먼트 (0)	2021.02.08
[Js] jQuery 객체 \| map() \| jQuery API (0)	2021.02.08
[Js] HTML Element \| 단수와 복수 \| DOM (0)	2021.02.08
[Js] jQuery 제어 대상찾기 \| jQuery \| javascript (0)	2021.02.08

Contents

새소식

인기 검색어

[Js] HTML Collection | DOM | javascript

HTMLCollection

'Languages > Java Script' 카테고리의 다른 글

당신이 좋아할만한 콘텐츠

티스토리툴바