같은 카드를 찾았는데 어떤 차이가 있나요?
웹페이지의 카드 두 개에 같은 class를 붙였다고 합시다. querySelectorAll('.card')와 getElementsByClassName('card')를 실행하면 처음에는 둘 다 같은 두 요소를 찾습니다. 중요한 차이는 그다음에 문서가 바뀔 때 나타납니다.
querySelectorAll의 결과는 검색 당시 일치한 요소들을 담은 정적인 NodeList입니다. getElementsByClassName의 결과는 현재 조건을 계속 반영하는 실시간 HTMLCollection입니다. 검색 조건이 같아도 목록의 갱신 방식이 같지는 않습니다.
카드를 붙인 직후에는 무엇이 보이나요?
‘목록 캡처’를 누르면 지금 있는 두 카드를 검색한 결과를 보관합니다. 이어서 ‘카드 추가’를 누르면 실제 createElement와 append로 DOM 요소를 하나 붙입니다. 화면의 카드 수와 실시간 목록 길이는 3이지만 기존 정적 목록 길이는 2입니다.
기존 정적 목록이 다시 계산되지는 않습니다. ‘새로 검색’을 누르면 현재의 세 카드를 담은 별도 정적 목록을 만들 수 있습니다. 처음 결과와 새 결과를 함께 남겨 두면 어느 시점의 검색인지 명확해집니다.
정적인 목록의 요소도 바뀔 수 있나요?
정적인 목록은 요소 구성원이 고정된다는 뜻입니다. 처음 목록의 첫 카드에 적힌 글자를 바꾸면 그 목록으로 읽는 글자도 달라집니다. 목록이 보관한 것은 카드의 옛 사진이 아니라 같은 DOM 요소에 대한 참조이기 때문입니다.
활동에서 ‘첫 카드 글자 바꾸기’를 누르면 화면의 첫 카드와 처음 목록이 가리키는 첫 카드의 글자가 함께 달라집니다. ‘정적’이라는 말을 문서 전체가 얼어붙는다는 의미로 확대하면 안 됩니다.
클래스를 지우면 목록은 어떻게 달라지나요?
‘마지막 카드의 class 제거’를 누르면 카드 요소 자체는 남아 있지만 검색 조건에서 빠집니다. 실시간 목록은 곧바로 줄어들고, 이미 캡처한 정적 목록의 길이는 유지됩니다. 화면에서는 검색 대상에서 제외된 카드도 구별해 보여 줍니다.
실시간 목록을 앞에서부터 돌면서 요소를 삭제하면 다음 요소가 앞으로 당겨집니다. 인덱스만 올리면 하나를 건너뛸 수 있으므로 순회 중 목록이 바뀌는지 주의해야 합니다. 고정할 필요가 있다면 Array.from으로 복사하는 등 의도에 맞는 방법을 정합니다.
자동 점검에서는 어느 시점을 기록해야 하나요?
AI가 버튼이나 카드 수를 보고할 때는 검색 함수, 검색 시점, 이후 문서 변경을 함께 기록해야 합니다. 나중에 생긴 요소를 처음 목록으로 모두 확인했다고 말하면 누락이 생깁니다. 새로 검색했는지, 실시간 목록을 읽었는지를 구별하세요.
모든 NodeList가 정적인 것은 아닙니다. childNodes가 반환하는 NodeList는 실시간으로 바뀔 수 있습니다. 객체의 이름 하나만 보고 추측하지 말고 해당 API의 명세를 확인해야 합니다. 이 실습은 자신의 페이지 안에서만 요소를 조작하며 외부 문서나 저장 데이터를 바꾸지 않습니다.