【JavaScript初心者】getElementsByClassNameを再帰を使って実装してみた

#はじめに
再帰(recursion)は初学者がつまづきやすいポイントとよく言われます。
Javascript初学者がrecursionの実装練習として、DOM操作の基本メソッドであるgetElementsByClassName()を実装してみました。
未対応edge caseも多々あると思いますがご了承ください。

#getElementsByClassNameとは？
DOM操作の基本メソッドです。
document内の任意のClass名の要素を配列として抽出します。
詳しくは公式ドキュメントをご覧ください。

#実装してみた
本来ならば、getElementsByClassNameはノードオブジェクトのメソッドであるため、任意のノードオブジェクトnodeObjのメソッドとして下記のような使い方をします。

const elements = nodeObj.getElementsByClassName(className);

今回は簡単のため、下記２つを引数にとる関数として実装してみました。

• className
  • 検索するクラス名
• nodeObj
  • 検索を実施するノード。指定したクラス名をこのノードおよびこのノードの子ノードのなかから検索する

getElementsByClassName

const getElementsByClassName = (className, nodeObj) => {
  const result = [];

  // 任意のnodeの中からクラス名がclassNameに一致する要素をresultにpushする関数を定義します
  const searchInsideNode = (node) =>{

    // nodeのクラス名にclassNameが含まれており、かつnodeがクラスを含んでいない場合を除くとき
    if(node.classList.contains(className) && node.classList !== undefined){
      result.push(node);
    };

    // nodeが子要素を持つときは、各子要素に対して再帰的に同じことをします。
    if(node.childNodes.length > 0){
      for (const element of node.childNodes){
        searchInsideNode(element);
      }
    }
  }

  //任意のnodeオブジェクトnodeObjに対してsearchInsideNodeを実行し、resultを返します。
  searchInsideNode(nodeObj);
  return result;
};