일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- debouncing
- ㅡ
- ?? #null병합연산자
- 서초구보건소 #무료CPR교육
- 조건부스타일
- alias설정
- 화살표2개
- tailwindCSS
- twoarrow
- 부모패딩
- es6
- DOM
- useQueryClient
- accordian
- Carousel
- CustomHook
- 리액트
- BFC
- parent padding
- createPortal
- 제어컴포넌트
- 부모요소의 패딩 무시
- 문제해결
- BlockFormattingContext
- vite
- ignore padding
- react
- 함수형프로그래밍
- QueryClient
- transition
- Today
- Total
프론트엔드 첫걸음
NodeList와 Array의 차이점 본문
NodeList와 Array 차이점
1. NodeLists는 DOM 요소에 접근하는 언어에 구애받지 않는 객체(브라우저 API)이며,
Arrays는 항목 모음을 포함하는 데 사용할 수 있는 JavaScript 객체다.
2. NodeList는 정적 콜렉션, Node.childeNodes는 동적인 콜렉션이다.
경우에 따라, NodeList는 라이브 콜렉션으로, DOM의 변경 사항을 실시간으로 콜렉션에 반영합니다. 예를 들어, Node.childNodes 는 실시간입니다:
var parent = document.getElementById('parent');
var child_nodes = parent.childNodes;
console.log(child_nodes.length); // let's assume "2"
parent.appendChild(document.createElement('div'));
console.log(child_nodes.length); // should output "3"
다른 경우 NodeList는 정적 콜렉션입니다. DOM을 변경해도 콜렉션 내용에는 영향을 주지 않습니다. document.querySelectorAll() 은 정적 NodeList를 반환합니다.
Don't use for...in to enumerate the items in NodeLists, since they will also enumerate its length and item properties and cause errors if your script assumes it only has to deal with element objects. Also, for...in is not guaranteed to visit the properties in any particular order.
for...of loops loop over NodeList objects correctly:
nodeList를 순회할때 for in 사용하지 말고 for문이나 for of 사용해라!!!!!!!!!!!!!!!!!!!!
https://developer.mozilla.org/en-US/docs/Web/API/NodeList
https://developer.mozilla.org/ko/docs/Web/API/NodeList
https://gomakethings.com/converting-a-nodelist-to-an-array-with-vanilla-javascript/
유사배열객체 NodeList를 Array로 바꾸려면 ?
let myArray = Array.from(nodeList)
Array.from이나 전개구문을 사용하면 됨
See the Pen nodelist에 for of쓰는거 아니야 by JEONG (@cona) on CodePen.
* inputbox에 checked='false'를 했는데 안먹는 이유는??
기냥 checked를 넣으면 그게 check다.. checked='false'쓰지마라...
https://stackoverflow.com/questions/24514566/checkbox-set-to-checked-false-not-working
'개발 공부 > Javascript' 카테고리의 다른 글
스크롤이 끝나면 alert 띄우기 - removeEventListener (0) | 2022.07.16 |
---|---|
Carousel 만들기 (0) | 2022.07.15 |
async , defer - javascript 렌더링 순서 바꿔 성능높이기 (0) | 2022.07.14 |
이벤트 버블링과 stop propagation (0) | 2022.07.09 |
?? null 병합 연산자 (0) | 2022.03.16 |