Create my own getElementsByClassName
개요: 오늘은 DOM 의 메소드를 바닐라 JS 로 구현해 보는 과제를 진행했다.
여기서 내가 거쳐 갔던 과정을 요약하자면 다음과 같다:
1) getElementsByClassName 을 여러 상황에 맞추어 이용하기
2) querySelector/All 과의 차이를 비교하기 (Class 의 경우)
3) 각 DOM 메소드들을 써보고 결과 값에 대한 콘솔 을 얻기
- querySelectorAll 의 경우 특이하게 nodeList 로 결과값을 얻는다.
- contains 는 쓰이는 대상이 document 내부의 node 이어야한다
- classList 는 node 를 리턴한다.
- getElementById 같은 개념이지만 훨씬 일찍 만들어진 메소드라서 호환성이 좋다.
4) 각 DOM Tree 구조의 요소들을 엑세스 하는 실험
5) Psuedo Code 짜기.
- 가장 처음 생각했던 부분은 double loop이다. 하지만 곧 우리는 각 html depth 가 어디까지 갈지 알 수 없기 때문에 이 부분에 대한 생각은 버렸다.
- 결국 Recursion 이 Child elements 들에 access 하는 가장 효과적인 방법이라고 결론지었다.
- 그 전에 먼저 각 엘레먼트들의 classList 에 접근해 className 이 존재하는지 확인하는 것이 1차 적인 방법이다.
- 그리고 이러한 결과 배열에 push 한다. (array.reverse() 함수를 직접 만들었을 때 처럼 .concat을 이용하여 붙여 넣는 방법도 있다.) 이 과정을 checkClass() 라는 함수에 저장했다.
- 이후 Recursion 의 Base Case 를 생각한다: 더이상 children 이 존재하지 않을 때까지.
- 이 때 사용한 method 는 hasOwnChildren() 이었다. 만약 false 라면 Recursion 은 멈출 것이다.
- Recursion 을 이용하여 nested depth 의 것들까지 checkClass() 를 통해 시킨다.
- Recursion 함수를 init 하기 위해 result 를 return 하기 전에 checkClass(document.body) 로 호출 한다.
6) 코드 재작성
- 첫 번째는 리커젼이 아닌 조건문으로,
- 두 번째는 전체 recursion
- 새 번째는 조건문을 수정한 recursion
- 네 번째는 위의 psuedo code 에서 언급한 checkClassName 에 대한 함수를 따로 구분하여 refactoring.
- Node vs Elements
- DOM 을 처음 배웠을 때 스쳐 갔던 개념이지만, Node 와 Element 의 차이에 대해서 어느정도 이해하게 된 것 같다.
- children vs childNodes HTML 엘레멘트와, 노드리스트를 불러온다는 점에서 근본적인 차이가 있다. 노드의 경우에는 엘레멘트가 아닌 단순한 문자열(text)를 포함하기 때문에 (물론 .split() 등을 통해서 걸러내거나 slice / bind 등으로 객체화 시킬 수 있겠지만) 실 사용적인 관점에서는 여러모로 parents 가
- DOM Structures
- classList
- className
- 트리구조에 대한 이해
- Recursion 을 실제 활용하는 법. (in this case, depth 를 알 수 없는 배열에 접근할 때)
결론
물론 자잘하게 다른 문제 풀이나 내용들이 있었지만, 주된 내용은 이 함수를 구현하는 것이었다. 여태까지 내가 풀어 본 문제 중에 가장 오래 걸렸으며 가장 많은 것을 배웠다. 코딩 자체를 한 시간은 짧았지만, 생각하는 시간이나 이전에 twittler 라는 트위터 클론 미니 프로젝트를 통해 이해하고 있었다고 생각했던 부분을 더 깊게 이해하는 과정 이었다고 생각한다. 느낀 점은 이러한 메소드 구현이 처음에는 크게 의미가 없다고 느꼈으나, 그냥 단순한 method 가 아닌 DOM 구조와 recursion 을 실 사용 하는 부분에 있어서 큰 학습 경험이 되었다. Trial and Error 과정에서 정말 많이 포기하고 싶었지만, stackOverflow 등에서 더 이상 해답을 찾는 질문이 아닌, 본질적인 이해를 하기 위한 질문을 하기 시작했다. 앞으로는 학습을 어떠한 강의나 이론적인 측면보다 실질적인 코딩과 생각하는 비중을 늘려야겠다고 다짐했다.
