はじめに
再帰(recursion)は初学者がつまづきやすいポイントとよく言われます。
Javascript初学者がrecursionの実装練習として、DOM操作の基本メソッドであるgetElementsByClassName()を実装してみました。
未対応edge caseも多々あると思いますがご了承ください。
getElementsByClassNameとは？
DOM操作の基本メソッドです。
document内の任意のClass名の要素を配列として抽出します。
詳しくは公式ドキュメントをご覧ください。
実装してみた
本来ならば、getElementsByClassNameはノードオブジェクトのメソッドであるため、任意のノードオブジェクトnodeObjのメソッドとして下記のような使い方をします。
constelements=nodeObj.getElementsByClassName(className);今回は簡単のため、下記２つを引数にとる関数として実装してみました。
className: 検索するクラス名nodeObj: 検索を実施するノード。指定したクラス名をこのノードおよびこのノードの子ノードのなかから検索する
getElementsByClassName
constgetElementsByClassName=(className,nodeObj)=>{constresult=[];// 任意のnodeの中からクラス名がclassNameに一致する要素をresultにpushする関数を定義しますconstsearchInsideNode=(node)=>{// nodeのクラス名にclassNameが含まれており、かつnodeがクラスを含んでいない場合を除くときif(node.classList.contains(className)&&node.classList!==undefined){result.push(node);};// nodeが子要素を持つときは、各子要素に対して再帰的に同じことをします。if(node.childNodes.length>0){for(constelementofnode.childNodes){searchInsideNode(element);}}}//任意のnodeオブジェクトnodeObjに対してsearchInsideNodeを実行し、resultを返します。searchInsideNode(nodeObj);returnresult;};