CODEWITHSUNDEEP
javascriptdomcontains
Clifford Fajardo
Clifford Fajardo

Reputation: 1447

Reimplementing getElementsByClassName from scratch (Vanilla JS only)

In the spirit of getting more familiar with the DOM & recursion, I decided to recreate getElementsByClassName from scratch (vanilla JS only, no jQuery). Currently, I can find all elements in the DOM that have a class that I want, but I'm having trouble with coming up with a way to get only elements that have two certain classes(or more).

<div class="one two">
   <h1 class="one">
      <span class="one two">
  </h1>
</div>

My current implementation returns what I expect, every element that contains the class 'one' is returned:

getElementsByClassName('one');
[<div class="one two"></div>, <h1 class="one"></h1>, <span class="one two"</span>]

What I'm trying to get to:

getElementsByClassName('one two');
[<div class="one two"></div>, <span class="one two"</span>]

One of the problems that I ran into is with classList.contains:

element.classList;
// ['one, 'two'];

element.classList.contain("one");
//returns true since the value actually exists


//PROBLEM:
element.classList.contains("one two"); 
//this is looking for "one two" in the array  and not 'one' and 'two'.
//this returns false & my code breaks  

//How would I be able to do something like this, even if it
//means recreating my own helper contains function?
contains('one','two');

My function:

var getElementsByClassName = function(className){
   var results = [];
   function getClass(nodeList){
     var childList = nodeList.children;
     _forEach(childList, function(node) {
     //1st level body check
      if(node.classList  && node.classList.contains(className)){
        results.push(node);
      }

      //has children, recurse
      if(node.children) {
        getClass(node);
      }
      else {
        getClass(node);
      }
    });
   }
   getClass(document.body);
   return results;
}



//Helper forEach function to iterate over array like DOM objects
var _forEach = function(collection, func) {
 for(var i = 0; i < collection.length; i++) {
   func(collection[i], i, collection);
 }
}

Upvotes: 2

Views: 1541

Answers (1)

T.J. Crowder
T.J. Crowder

Reputation: 1075209

Comments in the code — I haven't implemented it for you, just pointed out what you'd do:

var getElementsByClassName = function(className){
   // ***Here, split className on whitespace into an array **
   var results = [];
   function getClass(nodeList){
     var childList = nodeList.children;
     _forEach(childList, function(node) {
     //1st level body check
      // **Here, only include the element if Array#every is true,
      // **where you give Array#every a function that does your
      // classList.contains on the name for that iteration
      if(node.classList  && node.classList.contains(className)){
        results.push(node);
      }

      //has children, recurse
      if(node.children) {
        getClass(node);
      }
      else {
        getClass(node);
      }
    });
   }
   getClass(document.body);
   return results;
}

Upvotes: 3

Related Questions