Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 | 31 |
Tags
- 스파르타코딩클럽
- routing
- 동기
- 후기
- 개발
- Redux
- useEffect
- route
- imagePreview
- react
- 브라우저 렌더링
- 접근 제한 라우팅
- Github Actions
- 7기
- S3
- CI/CD
- 항해99
- FileReader
- socket.io
- 채팅방
- rendering
- Preview
- qwe
- 미리보기
- 라우팅
- previousState
- 배포
- updater
- setstate
- 비동기
Archives
- Today
- Total
삐옹
가짜 배열 Nodelist 본문
예전 기억을 더듬어보니, '가짜 배열' 어쩌구저쩌구 했던것 같은데요.
왜 쓰이는건지 궁금해져
정리해보기로 했습니다.
(요즘 왜 집착증에 걸렸다)
Nodelist
배열이 아니라 유사배열이다.
- for, for...of, forEach를 사용하여 반복할 수 있다
- element.childNodes 속성과 document.querySelectorAll 메소드에 의해 반환되는 콜렉션이다.
- element.childNodes 속성에서는 DOM의 변경을 반영한다.(라이브 콜렉션)
- document.querySelectorAll 속성에서는 DOM을 변경해도 영향을 주지 않는다.(정적 콜렉션)
querySelectorAll로 반환한 nodelist에는 뭔가를 한다고 값은 정적 콜렉션이어서 실시간으로 반영하지 않는다.
즉 중간에 append 로 DOM을 추가하는 함수가 있어도 추가하지 않는다.
유사배열의 차이
말 그대로 유사배열이기 때문에 배열에 적용할 수 있는 메소드가 제한된다.
- nodelist에서 적용 가능한 메소드
- entries()
- forEach()
- item()
- key()
- values()
- HTMLCollection에서 적용 가능한 메소드
- item()
일반 배열로 만들 수 있을까?
답은 예스.
Array.from()을 사용해 배열로 바꾸어 배열의 메소드들을 그대로 사용할 수 있다.
const nodeList = document.querySelectorAll('.list');
const htmlCollection = document.getElementByClassName('list');
htmlCollection.forEach(list => list.addEventListener("click", func);
// 사용 불가
Array.from(nodeList).forEach(list => list.addEventListener("click", func);
// 사용 가능
'Javascript' 카테고리의 다른 글
[자바스크립트 기초 #1] 자바스크립트 엔진(엔진 이해, 스택 개념) (0) | 2022.06.26 |
---|---|
Javascript 객체 복사하기(1) (0) | 2022.05.27 |
map()과 forEach()의 차이점 (0) | 2022.05.22 |
반복문을 종료해보자. break? return? (0) | 2022.05.20 |
배열의 요소 삭제하는 5가지 방법 (0) | 2022.05.20 |