[TIL-27] HTMLCollection & Array.from()

da.circle·2022년 10월 6일

TIL

목록 보기

27/44

HTMLCollection

리턴 결과가 복수인 경우에 사용하게 되는 객체이다.
유사배열이지 배열은 아니다. (배열과 비슷한 사용방법을 가진다.)
HTMLCollection의 목록은 실시간으로 변경된다.
- 문서가 변경될 때 자동으로 업데이트된다.
getElementsByTagName, getElementsByClassName의 복수 리턴 타입이다.

const commentList = document.getElementsByClassName("commentList");
console.log(commentList);
/*
HTMLCollection(1)
0: div.commentList
length: 1
[[Prototype]]: HTMLCollection
*/

const writer = document.createElement("span");
writer.className = "writer";

commentList.appendChild(writer); //commentList.appendChild is not a function

Array.from()

유사배열 등을 배열로 만드는 메소드이다.

const commentArray = Array.from(commentList);
/*
[div.commentList]
0: div.commentList
length: 1
[[Prototype]]: Array(0)
*/

왜 HTMLCollection같은 유사 배열을 Array로 바꿔서 사용할까?

HTMLCollection은 파일이 변경되면 실시간으로 변경되는 점을 유의할 것!

<head>
	<style>
		.red {
		  color: red;
		}

		.blue {
		  color: blue;
		}
	</style>
</head>
<body>
	<ul>
	  <li class="red">li1</li>
	  <li class="red">li2</li>
	  <li class="red">li3</li>
	</ul>
</body>

const liList = document.getElementsByClassName("red");
console.log(liList);
/*
HTMLCollection(1)
0: li.red
length: 1
[[Prototype]]: HTMLCollection
*/
		for(let i = 0; i < liList.length; i++){
			console.log(liList[i]);
			liList[i].className = "blue"
		}

liList[0] class가 blue로 바뀐다.

→ HTMLCollection에는 class = “red”인 li만 들어가야 하므로 제외된다!

liList[1] class가 blue로 바뀐다.

→ 현재 HTMLCollection에는 [li.red, li.red] 이렇게만 남아있다. 여기서 liList[1]은 두번째 li.red이므로 현재 유사배열에서의 li.red[0]은 바뀌지 않는다!

const liList = document.getElementsByClassName("red");

const liListArr = Array.from(liList);

for(let i = 0; i < liListArr.length; i++){

	liListArr[i].className = "blue"
}