논리적 사고

카드를 추가했는데 두 목록의 길이는 왜 다를까요?

같은 요소를 찾았어도 검색 결과의 갱신 방식은 다릅니다. 실제 DOM에 카드를 붙이고 정적 목록과 실시간 목록을 비교합니다.

그림에서 무엇을 볼까요?

카드 추가 후 기존 정적 목록 2개와 현재 실시간 목록 3개가 달라지는 과정

웹페이지의 카드 두 개에 같은 class를 붙였다고 합시다. querySelectorAll('.card')와 getElementsByClassName('card')를 실행하면 처음에는 둘 다 같은 두 요소를 찾습니다. 중요한 차이는 그다음에 문서가 바뀔 때 나타납니다.

querySelectorAll의 결과는 검색 당시 일치한 요소들을 담은 정적인 NodeList입니다. getElementsByClassName의 결과는 현재 조건을 계속 반영하는 실시간 HTMLCollection입니다. 검색 조건이 같아도 목록의 갱신 방식이 같지는 않습니다.

함께 확인할 점

아래 독립 실습 영역에 실제 DOM 요소를 추가·변경합니다. 문서 전체의 다른 카드는 검색하지 않습니다.

생각해 볼 질문

페이지를 점검했다는 기록에 검색 시점과 이후 변경을 어떻게 남기면 누락을 찾기 쉬울까요?

함께 볼 그림

−1.5에서 같은 거리인 −2와 −1 중 양의 방향인 −1을 선택하는 규칙

자바스크립트는 −1.5를 왜 −1로 반올림할까요?

name·10·2·note의 대입 순서와 Object.keys의 2·10·name·note 결과를 나란히 놓고 배열 인덱스와 일반 문자열을 구별한 그림

객체에 먼저 넣은 이름이 Object.keys에서도 먼저 나올까?

3 < 2가 거짓이 되고 숫자 0으로 변환되어 0 < 1은 참이 되는 경로와 두 독립 비교의 논리곱은 거짓인 경로

3 < 2 < 1이 참이면 세 수가 오름차순일까?

← 논리적 사고 그림 더 보기