아래의 문제는 document.getElementsByClassName 의 polyfill 을 만드는 문제입니다.

function getElementsByClassName(className) {
  // your code here
  let empty = [];
  let body = document.body;
    function findClass(node){
      for(let i = 0; i < node.classList.length; i++){
        if(node.classList[i] === className){
          empty.push(node)
        }
      }
      if(node.hasChildNodes()){
          for(let i = 0; i < node.children.length; i++){
            findClass(node.children[i]);
          }
        }
      }
    findClass(body)
  return empty
  };

이렇게 해당문제를 풀었습니다.궁금한점이 두가지 있습니다.

• 디버깅을 했을때 해당부분을 건너뛰고 다음 if(node.hasChildNodes())로 넘어가는데왜 바로 넘어가는지 궁금합니다.

if(node.classList[i] === className){ 
  empty.push(node) 
}

• 위의 코드 children을 childNodes로 바꾸면 length property가 사용되지 않는데 이것에 대하여 궁금합니다.

function getElementsByClassName(className) {
  // your code here
  let empty = [];
  let body = document.body;
    function findClass(node){
      for(let i = 0; i < node.classList.length; i++){
        if(node.classList[i] === className){
          empty.push(node)
        }
      }
      if(node.hasChildNodes()){
          for(let i = 0; i < node.childNodes.length; i++){
            findClass(node.childNodes[i]);
          }
        }
      }
    findClass(body)
  return empty
};

답변)

• 첫 body를 검사할 때는 classList가 비어있어서 넘어가는 것 같습니다.

• HTML을 childNodes 메소드를 통해 DOM으로 접근할 시 문제점은,whitespace가 하나의 node로 잡힌다는 점입니다. 이게 하나의 node로 잡히면서 HTML의 whitespace (스페이스, 엔터)에 접근하게 되고이는 text라는 것으로 읽히게 되는데, 이 node 는 classList가 없어서, ~~~ 'length' of undefined 에러가 나게 됩니다.