Reimplementation of document.getElementsByClassName not working properly

Reimplementation of document.getElementsByClassName not working properly
0

#1

Hey,

I am working on reimplementing document.getElementsByClassName using vanilla javascript. My code doesn’t seem to be working, and I don’t know for the life of me why. Any help would be appreciated.

Here is the code:

 var getElementsByClassName = function(className) {
  		function domCrawler(node) {
  			var results = [];
  			// check if the node has any classes at all, then if it has the target class
  			if (node.classList && node.classList.contains(className)) {
	  			//child has target class, add it to results
	  			results.push(node);
			}

			// check if the node has children nodes
			if (node.hasChildNodes()) {
				// it does, so store them in a variable to iterate through
  				var children = node.childNodes;
	  			// iterate through the node's children to check if they have the target class
	  			for (var i = 0; i < children.length; i++) {
	  				// send each child back through the domCrawler
	  				// the results of this function call stack will be in an array different from the original results array
	  				// we can combine the different results arrays using concat()
	  				results = results.concat(domCrawler(children[i]));
	  			}
	  		}
	  		return results;				
		}
		domCrawler(document.body);
	};

#2

You’re not returning anything from your getElementsByClassName function.

From your domCrawler, yes, but not from your main function.

I reformatted this very slightly to use a closure so that you would not be re-creating the domCrawler function on every invocation of getElementsByClassName, but it is almost completely the same as yours, and it works just fine here:


 const elementsByClassName = (function(){

   function domCrawler(node, className) {
     
     var results = [];
     // check if the node has any classes at all, then if it has the target class
     if (node.classList && node.classList.contains(className)) {
       //child has target class, add it to results
       results.push(node);
     }
     
     //debugger;

     // check if the node has children nodes
     if (node.hasChildNodes()) {
       // it does, so store them in a variable to iterate through
       var children = node.childNodes;
       // iterate through the node's children to check if they have the target class
       for (var i = 0; i < children.length; i++) {
         // send each child back through the domCrawler
         // the results of this function call stack will be in an array different from the original results array
         // we can combine the different results arrays using concat()
         results = results.concat(domCrawler(children[i], className));
       }
     }
     return results;				
     
   }
   
   
  return function(className) {
      return domCrawler(document.body, className);
  };   
   
 })();

#3

Thank you very much!


#4

You’re welcome - glad I could help!