querySelector 구현과정

querySelector API 구현

기능은 어느정도 완성된거 같아 2주차 선택미션인 querySelector API를 직접 만들었습니다.
querySelector를 만들면서 알게된 점은 탐색은 깊이우선depth-first 전위pre-order순회를 한다는 것입니다.
만약 해당 알고리즘 대로라면 root노드부터 순서대로 노드를 탐색하기 때문에 만약 오른쪽 가장 마지막에 있는 리프노드를 찾는다면 효율이 떨어질 수 있다고 생각했습니다.
효율을 높이기 위해 가능 한 탐색범위를 좁게하여 querySelector를 사용해야 하는것을 배웠고, querySelector API를 깊게 이해할 수 있는 시간이었습니다.

function myQuerySelector(selector) {
  //최초 dom 탐색
  const dom = document.querySelector('#root');

  //ID, Class 구분
  if (selector.startsWith('.')) return classSelector(dom, selector);
  if (selector.startsWith('#')) return idSelector(dom, selector);

  return null;
}

function classSelector(dom, selector) {
  const className = selector.slice(1);
  let currentElement = '';

  for (const node of dom.children) {
    currentElement = dfs(node, className);
    if (currentElement) break;
  }

  return currentElement;
}

function idSelector(dom, selector) {
  const id = selector.slice(1);
  let currentElement = '';

  for (const node of dom.children) {
    currentElement = dfs(node, id);
    if (currentElement) break;
  }

  return currentElement;
}

const dfs = (node, elementIdentifier) => {
  if (node.className === elementIdentifier) return node;
  if (node.id === elementIdentifier) return node;

  for (const child of node.children) {
    const findNode = dfs(child, elementIdentifier);
    if (findNode) return findNode;
  }
};

export { myQuerySelector };