getElementsByClassName 함수 구현하기 (+자바스크립트에서 유사배열과 배열, 변환 방법)

프론트엔드 라이브 코딩이나 화이트보드 테스트에서 자주 나오는 과제 중 하나가 DOM API를 직접 구현해보는 문제입니다. 그중 대표적인 것이 document.getElementsByClassName을 직접 만들어보라는 과제입니다. 이번 글에서는 이 문제를 어떻게 접근하면 좋을지 베이스케이스 → 엣지케이스 → 효율성 → 가독성 순서로 풀어봅니다.

문제 이해

목표는 주어진 className을 가진 모든 요소를 찾아 배열로 반환하는 함수입니다.
기본적으로는 DOM 트리를 순회하면서 조건에 맞는 요소를 모으면 됩니다.

function getElementsByClassName(className) {
  const bodyChildrenEls = document.body.children;
  const result = [];
  const stack = [...bodyChildrenEls];

  while (stack.length) {
    const currentElement = stack.pop();
    const currentElementChildren = currentElement.children;

    for (let i = 0; i < currentElementChildren.length; i++) {
      const currentChildrenEl = currentElementChildren[i];
      stack.push(currentChildrenEl);
    }

    if (currentElement.classList.contains(className)) {
      result.push(currentElement);
    }
  }

  return result;
}

1. 베이스케이스

최상위 요소에만 클래스가 붙은 경우
DOM이 비어있을 때 (<body></body>)
찾는 클래스가 없는 경우

function getElementsByClassName(className) {
  const bodyChildrenEls = document.body.children;
  const result = [];

  for (let i = 0; i < bodyChildrenEls.length; i++) {
    const currentEl = bodyChildrenEls[i];
    const currentElClassName = currentEl.className;

    if (currentElClassName === className) {
      result.push(currentEl);
    }
  }

  return result;
}

2. 앳지 케이스

클래스가 여러개 붙은 경우
중첩된 요소일 경우
중첩 댑스가 깊어질 경우 ... 등 그 외에 실시간으로 추가되는 조건들 .. ?

2-1. 중첩된 자식까지 순회 (DFS / Stack)

모든 하위 노드까지 탐색할 수 있도록 stack을 도입합니다.

function getElementsByClassName(className) {
  const bodyChildrenEls = document.body.children;
  const result = [];
  const stack = [...bodyChildrenEls];

  while (stack.length) {
    const currentElement = stack.pop();
    const children = currentElement.children;

    // 자식 요소 스택에 추가
    for (let i = 0; i < children.length; i++) {
      stack.push(children[i]);
    }

    if (currentElement.className === className) {
      result.push(currentElement);
    }
  }

  return result;
}

✅ 동작: 중첩 구조까지 탐색 가능
❌ 문제: className이 "a b"처럼 여러 개일 경우 정확히 일치하지 않음

2-2 다중클래스 대응 ("a b")

function getElementsByClassName(className) {
  const bodyChildrenEls = document.body.children;
  const result = [];
  const stack = [...bodyChildrenEls];

  while (stack.length) {
    const currentElement = stack.pop();
    const children = currentElement.children;

    for (let i = 0; i < children.length; i++) {
      stack.push(children[i]);
    }

    // classList.contains로 특정 클래스만 검사
    if (currentElement.classList.contains(className)) {
      result.push(currentElement);
    }
  }

  return result;
}

✅ 동작: <div class="a b"> 에서 getElementsByClassName("a") 호출 시 정상적으로 매칭됨

3. 효율성 (시간복잡도 & 공간복잡도)

시간복잡도: 모든 노드를 한 번씩 방문하므로 O(N) (N은 DOM 노드 수)
공간복잡도: 스택과 결과 배열에 최대 O(N)까지 저장 가능

4. 가독성

면접 후반에는 코드의 깔끔함도 평가 요소가 될 수 있음

stack → pendingNodes
result → matchedElements
currentElementChildren → children

+ 유사배열 정리
자바스크립트를 쓰다 보면 배열처럼 보이는데 배열은 아닌 값들을 종종 만납니다. 흔히 유사배열(array-like) 이라고 부르는 것들입니다. 이번 글에서는 유사배열과 배열의 차이를 정리하고, 유사배열을 배열로 변환하는 다양한 방법을 살펴보겠습니다.

유사배열이란?

유사배열은 length 속성과 인덱스 번호를 가진 객체입니다. 겉모습은 배열 같지만 실제 배열 메서드(map, forEach, filter 등)는 사용할 수 없습니다.

대표적인 예시:

함수 안의 arguments
document.querySelectorAll 같은 DOM API 결과값
HTMLCollection

function example() {
  console.log(arguments); // [Arguments] { '0': 1, '1': 2, '2': 3 }
}

example(1, 2, 3);

const divs = document.querySelectorAll('div');
console.log(divs); // NodeList(3) [div, div, div]

배열과의 차이

배열은 Array.prototype을 상속받아 다양한 메서드를 쓸 수 있습니다. 반면 유사배열은 단순 객체라 메서드를 직접 사용하면 에러가 납니다.

const arr = [1, 2, 3];
arr.forEach(x => console.log(x)); // 정상 동작

const divs = document.querySelectorAll('div');
divs.forEach(x => console.log(x)); 
// TypeError: divs.forEach is not a function

유사배열 → 배열 변환 방법

1. Array.from()

ES6에서 도입된 가장 간단하고 직관적인 방법입니다.

const divs = document.querySelectorAll('div');
const divArray = Array.from(divs);

divArray.forEach(div => console.log(div));

2. 스프레드 연산자 [... ]

더 간결하게 배열로 만들 수 있습니다.

const argsToArray = (...args) => {
  const arr = [...arguments];
  console.log(arr);
};

argsToArray(1, 2, 3); // [1, 2, 3]

3. Array.prototype.slice.call()

ES6 이전에 많이 쓰이던 방식입니다.

function oldSchool() {
  const arr = Array.prototype.slice.call(arguments);
  console.log(arr);
}

oldSchool('a', 'b', 'c'); // ['a', 'b', 'c']

그 외 실제 활용 예시

DOM 조작

querySelectorAll로 선택한 결과를 배열로 변환해 map을 쓸 수 있습니다.

const buttons = document.querySelectorAll('button');

// 유사배열 그대로는 map 불가
// buttons.map(...) -> 에러 발생

// 변환 후 사용
const texts = [...buttons].map(btn => btn.innerText);
console.log(texts);

함수 인자 처리

arguments 객체를 배열로 바꾸면 편리하게 조작할 수 있습니다.

function sum() {
  const nums = Array.from(arguments);
  return nums.reduce((acc, cur) => acc + cur, 0);
}

console.log(sum(1, 2, 3, 4)); // 10

타입 판별하기

유사배열인지 배열인지 헷갈릴 때는 Array.isArray()를 쓰면 됩니다.

Array.isArray([1, 2, 3]);        // true
Array.isArray(document.querySelectorAll('div')); // false

'Frontend > 🔨 JS' 카테고리의 다른 글

Three.js 로 움직이는 지구본 만들기 (0)	2022.10.22
[js library] AOS 스크롤 애니메이션 구현하기 (0)	2022.08.10
[Javascript plugin] Masonry Layout 적용하기 (0)	2022.07.07

KIMHAEUN.COM