컬렉션(Collection)이란?

컬렉션은 자바스크립트 DOM을 공부하면서 계속 보는 단어였는데 와닿지 않았다.

gpt 도움으로 이해가 되어 기록용으로 적어본다.

정말 얕은 지식이니 더 깊게 들어가고 싶으면 재서치가 필요하다😂

 

 

https://ko.javascript.info/searching-elements-dom 에서

왜 documnet.getElementsByTagName('input').value = 5; 는 동작하지 않을까? 에 대해서 질문을 시작했다.

 

1. document.getElementsByTagName('input') 이란

이 코드는 HTML 문서 전체에서 <input> 태그를 모두 찾아준다.

예를 들어 아래와 같은 HTML 있다고 가정.

<input type="text">
<input type="number">
<input type="password">

 

이때

let inputs = document.getElementsByTagName('input');

inputs 변수에는 모든 <input> 요소가 담긴 묶음(컬렉션, Collection) 이 들어가게 된다.

 

2. 컬렉션이란?

• 여러 개의 DOM 요소를 한 바구니에 담아놓은 배열 비슷한 자료구조 라고 생각하면 된다.
• JS에서는 정확히 HTMLCollection(또는 NodeList) 라고 부른다.
  (HTMLCollection과 NodeList는 비슷하면서도 또 다름! 우선 이렇게 생각하자)

예를 들어 위 inputs의 결과는

[<input type="text">, <input type="number">, <input type="password">]

처럼 여러 input 태그가 묶음으로 담긴 것이다.

 

 

3. 왜 `value = 5;` 가 안되는가?

• 이유1
  • `document.getElementsByTagName('input')` 의 결과는 여러 개의 input 요소를 담은 컬렉션(HTMLCollection) 이지, input 요소 그 자체가 아니다.
• 이유2
  • `.value`는 input 요소 하나에만 쓸 수 있는 속성이다. 컬렉션 전체에는 `.value` 라는 속성이 없다.
  • 만일 값을 넣어주고 싶다면,

const input = document.getElementsByTagName('input');

// 첫 번째 input에만 value 값 넣기
document.getElementsByTagName('input')[0].value = 5;

// 반복문으로 모두 적용1
for(let i = 0; i < inputs.length; i++) {
	inputs[i].value = 5;
}

// 반복문으로 모두 적용2
for(let input of inputs) {
	input.value = 5;
}

 

 

4. 정리 - 컬렉션이란

• 컬렉션은 여러 요소를 담은 바구니다. 이 바구니에 바로 value 값을 줄 수 없다. 바구니 안 물건(input) 각각에 value 값을 줘야 한다.