QuerySelector 제거 및 DOM Tree 직접 참조 기반의 객체 매핑 구조 설계

Context

기존 document.querySelector() 사용 시 발생하는 성능 저하 및 런타임 오버헤드에 따른 한계 직면. DOM 탐색 비용을 최소화하고 Javascript OOP 패턴에 최적화된 요소 참조 방식의 필요성 대두.

Technical Solution

• document.body를 Root로 설정하여 DOM Tree의 계층 구조를 직접 추적하는 참조 체계 구축
• firstElementChild, children 등 내장 속성을 활용하여 Selector 엔진의 파싱 과정을 생략한 직접 접근 방식 채택
• Map() 기반의 createObjects 함수를 통해 DOM 요소를 명명된 객체로 캡슐화하여 전역 관리
• getDomObjects와 getDomObjectsExtended로 구분하여 정적 요소와 동적/지연 생성 요소를 단계적으로 바인딩하는 파이프라인 설계
• 의존성 주입(Dependency Injection) 패턴을 적용하여 생성된 DOM 객체 묶음을 하위 모듈 및 클래스에 전달하는 구조 구현