재귀함수(recursion)을 활용해 getElementsByClassName 구현하기

jomminii_before·2019년 11월 8일
0
post-thumbnail
post-custom-banner

재귀함수(recursion)를 활용해 getElementsByClassName() 메소드를 구현해봤습니다.

[pseudo code]

  1. 결과를 담을 빈배열 result 생성
  2. html에서 class를 담고 있는 최상위 element인 body부터 class를 찾아내려감 -> document.body에서 시작
  3. 현재 element가 인자로 들어온 className을 포함하고 있으면, result배열에 추가
  4. element에 자식 element가 있으면, for문을 돌면서 recursion을 돌려주고, recursion을 통해 element가 지정된 className을 가지고 있는지 확인
  5. 자식 element가 없을때까지 recursion이 돌아간 후 result 배열을 리턴

[작성 code]


function getElementsByClassName(className) {
  let result = []; // 결과 요소를 담을 배열

  let body = document.body; // 최상위 element

  //리커젼 함수
  let recursion = function(element){
    if(element.classList.contains(className)){  // element가 주어진 className을 담고 있는지 확인 후, true이면 result배열에 추가
      result.push(element);
    }

    if(element.children.length > 0){ // 자식 element가 있으면
      for(let i = 0 ; i < element.children.length ; i ++){ //for 문을 돌면서 리커젼을 통해 className 포함 여부를 확인
        recursion(element.children[i]);
      }
    }
  }

  recursion(body);
  return result;

}
profile
https://velog.io/@jomminii 로 이동했습니다.
post-custom-banner

0개의 댓글