profile
블로그 이사 🚚 https://wonsss.github.io/
태그 목록
전체보기 (95)자바스크립트(32)자료구조(13)클린코드(13)알고리즘(12)회고(10)우테코(9)React(6)정렬 알고리즘(4)DOM(4)개발이랑은 딱히 상관없는 그냥 한 주 이야기(4)TIL(3)우아한테크코스(3)array.length(2)nodejs(2)DFS(2)너비우선탐색(2)stack(2)queue(2)JavaScript(2)구조분해할당(2)git(2)퀵소트(2)깊이우선탐색(2)재귀함수(2)트리(2)BFS(2)우선순위 큐(2)insertAdjacentHTML(1)선입선출(1)virtual DOM(1)타입 검사(1)객체 변경 방지 메서드(1)object(1)배열(1)Manifest(1)동등 연산자(1)이벤트 위임(1)비차단(1)proto(1)크롬익스텐션(1)else if(1)순수함수(1)불변성(1)코드컨벤션(1)선택 정렬(1)참같은값(1)컴포넌트 합성(1)ReactDOM(1)싱글스레드(1)이벤트루프(1)Graph(1)radix sort(1)stopPropagation(1)거짓같은값(1)애자일(1)eqeqeq(1)해시(1)해시맵(1)priority queue(1)heap(1)프로미스(1)그래프 순회(1)단축평가(1)함수형 프로그래밍(1)객체(1)제너레이터(1)이중 연결 리스트(1)시간복잡도(1)커스텀 이벤트(1)null 병합 연산자(1)instanceof(1)버블 정렬(1)reconciliation(1)해시 테이블(1)dijkstra(1)다익스트라(1)라우팅(1)프로토타입(1)비동기반복(1)매개변수(1)CRLF(1)공간복잡도(1)null(1)early-return(1)Prototype(1)이벤트 흐름(1)NaN(1)유사배열객체(1)props drilling(1)고차 함수(1)react redux(1)부정조건문(1)composition(1)getElementsByClassName(1)async(1)비동기(1)코드리뷰(1)책리뷰(1)Document 노드(1)linkedlist(1)&&(1)singly linked list(1)선형 검색(1)LF(1)타입스크립트(1)nodeList(1)typeof(1)this바인딩(1)Element 노드(1)의존성역전원칙(1)prefix-suffix(1)조건문(1)break(1)Node(1)querySelectorAll()(1)continue(1)Object.prototype.toString.call()(1)min-max(1)object.freeze(1)Computed property Name(1)Object.isFrozen()(1)props.children(1)검색 알고리즘(1)OR 연산자(1)배열 고차함수(1)산책(1)async/await(1)이진 힙(1)Big O(1)context(1)삼항연산자(1)tree traversal(1)타입(1)후입선출(1)길 찾기(1)리팩토링(1)this(1)first-last(1)begin-end(1)CSS(1)CSS Module(1)styled components(1)가중 그래프(1)드모르간의 법칙(1)함께 자라기(1)퀵정렬(1)useCallback(1)import 모듈(1)useselector(1)FIFO(1)preventDefault(1)prettierrc(1)기타(1)(1)InnerHTML(1)분기다루기(1)이진 탐색 트리(1)이진 검색(1)appendChild(1)스택(1)array(1)트리구조(1)단일 연결 리스트(1)무방향 그래프(1)클래스 컴포넌트(1)graph traversal(1)캡처링 단계(1)doubly linked list(1)자막번역(1)LIFO(1)재조정(1)환경설정(1)components(1)버블링 단계(1)isNaN(1)for await of(1)lookup table(1)병합 정렬(1)DOM 이벤트(1)일치 연산자(1)다크모드(1)HTMLCollection(1)try catch(1)default case(1)Binary Search Tree(1)그래프(1)Hash Table(1)선언적 프로그래밍(1)Naive String Search(1)인접 리스트(1)(1)동시성(1)else(1)robots(1)삼항조건연산자(1)트리 순회(1)기수 정렬(1)binary heap(1)redux(1)EOL(1)eslintrc(1)Real DOM(1)stopImmediatePropagation()(1)합성(1)vscode(1)노션(1)디버그(1)최적화(1)React.memo(1)경계(1)undefined(1)eqeq(1)
post-thumbnail

HTMLCollection vs NodeList 둘의 차이를 알고 있나요?

HTMLCollection vs NodeList HTML의 구조나 내용 또는 스타일 등을 동적으로 조작할 필요가 자주 있는데, 이를 위해서는 먼저 요소 노드를 취득해야 한다. 같은 class 어트리뷰트 값을 갖는 모든 요소 노드들을 취득하기 위한 방법에는 두 가지가 있는데, querySelectorAll과 getElementsByClassName이 바로 그것이다. 그런데 둘 다 같은 효과를 내는 것 같은데, 왜 두 개나 있는지 의문이 들었고 둘의 공통점과 차이점이 궁금해졌다. 특히, 습관적으로 Array.from()을 하여 유사배열객체를 배열로 만들어 왔는데 그 이유도 확실히 알아야겠다는 생각이 들었다. HTMLCollection, NodeList 두 객체의 공통점 둘 다 DOM API가 여러 개의 결과값을 반환하기 위한 DOM 컬렉션 객체이다. 또한, 둘 다 유사 배열 객체이면서 이터러블이다. 따라서 둘 다 for ...of 문으로

2022년 2월 24일
·
0개의 댓글
·