/document.getElementsByClass the anatomy!!

document.getElementsByClass the anatomy!!

Asalamu Alaikum,
This is Saad Talaat,

Since i started using jQuery or dojo or any javascript browser-based development library or framework.i have wondered how did those guys get the elements by class, by those query selectors
But i was just wondering…and as i always do ( develop API’s that simulates those frameworks applications). I just thought today about developing that document.getElementsByClass.

Actually the idea was so simple. but when you get to the code you’ll definitely find errors you didn’t expect…anyway
the idea is : if we are going to get element by class we won’t be looping on the childNodes of the body as many may think…we actually need to loop on all the Nodes in the body. so nesting here is what we want to get over…so let’s see this pic.
I’ve actually drew this to analyze the idea

As you see we begin with body so we count how many childNodes it have and loop on them and if they had childNodes loop inside them and if a childNode had childNodes loop inside it.Apparently, we are using recursive function over here..

So we will make an array to store our nodes that have the class we are looking for, if we took a look at the image again we will know what it is about. the function loops on every element and if it has the class it stores it in the array. so first we go Deeeeeep in the most low level nested node.and then start go up and collect out nodes…it may sound like merge sorting.well yea it’s the same way.

Enough words..let’s get to the code

var arr=[];
var oBody=document.body.childNodes;
return inside(oBody,c);
function inside(oArr,c){
var i=0;
{inside(oArr[i].childNodes,c); }
if(oArr[i].attributes && oArr[i].attributes.class){
return arr;

First we declare our nice array :).then we start a function that takes on parameter/argument which is the class name . and it only contains the array of childNodes of the body and our Recursive function invoked!

the Recursive function takes 2 parameter/arguments the 1st one is the array we will loop inside and the 2nd is the class name

then we start defining a counter inside the function so everytime the function recruit itself it will start from 0 again.anyway
Apparently the loop will loop as many times as the childNodes number.
As we said before we need to loop inside the nodes that have childNodes so if (thisnode.childNodes!=0) Loop inside it.
And so on until we get to the lowest level where there is no more childNodes,Then it check if (thisnode.attributes….what is that??
As most of us know that TextNodes don’t have attributes so TextNode.attribute=null and thanks to double negation that equals false and (&&) also if(thisnode.attributes.class….so if the node doesn’t have a class attribute just loop to the next element/node
But when we find a node which isn’t textNode and does have class then we test if it equals the class name we are looking for…if not…get the next node….
and if u are not familiar with the object oriented javascript or the document object…you won’t understand why it is document.getElementsByClass :).so in easy way we just added another element to the document object. if you do programming 🙂

If you are going to use this code declare it on the load event of the window :).just if you are going to forget..