<!DOCTYPE html>
<html>
<head>
<title>HTMLCollection Example</title>
</head>
<body>
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
<script>
const boxes = document.getElementsByClassName('box'); //HTMLCollection
</script>
</body>
</html>HTMLCollection
- 유사배열이면서 이터러블한 객체.
- document객체의 메서드들로 접근한 요소들의 컬렉션.
- DOM의 상태에따라 실시간으로 업데이트 되는 동적인 컬렉션.
<!DOCTYPE html>
<html>
<head>
<title>NodeList Example</title>
</head>
<body>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
<script>
const paragraphs = document.querySelectorAll('p');//NodeList
</script>
</body>
</html>NodeList
- 유사배열이면서 이터러블한 객체.
- CSS선택자로 접근한 요소들의 컬렉션.
- DOM의 상태에따라 실시간으로 업데이트 되지않는 정적인 컬렉션.
'JavaScript' 카테고리의 다른 글
| Map (0) | 2023.09.29 |
|---|---|
| Set (0) | 2023.09.28 |
| 배열 메서드 (0) | 2023.09.14 |
| Map, set, get (0) | 2023.08.24 |
| Form 접근하기 (0) | 2023.08.24 |
