JavaScript please explain this syntax

Question

I am JS newbie reading about JS data types which pointed me to the Live NodeLists and Static NodeLists on those pages: Why is getElementsByTagName() faster than querySelectorAll()? and HTMLCollections & NodeLists Mentioned pages describes their differences using very similar examples:

Live NodeLists:

var divs = document.getElementsByTagName("div"),
    i=0;

while(i < divs.length){
    document.body.appendChild(document.createElement("div"));
    i++;
}

Static NodeLists:

var divs = document.querySelectorAll("div"),
    i=0;

while(i < divs.length){
    document.body.appendChild(document.createElement("div"));
    i++;
}

I am interesting in this particular piece of code:

var divs = document.getElementsByTagName("div"),
    i=0;

resp. this one:

var divs = document.querySelectorAll("div"),
    i=0;

Can somebody please clarify me what is this construction doing? Or the question maybe should be: what is the content and type of variable divs after this? I was assuming that this is array, so I have tried this minimalistic JS vhere I have added further variables:

var divs = document.getElementsByTagName("div"), 
    j=5,   
    i=0;
alert(divs.length);

but no mather how many other variables I have added to divs along with document.getElementsByTagName the result of alert() was always 1. Then I have tried print it via typeof() and it returns me that this is object. What is going on here, is it some special JS syntactic sugar or what?

Answer 1

This code:

var divs = document.getElementsByTagName("div"), 
    j=5,   
    i=0;

Is the same as this:

var divs = document.getElementsByTagName("div");
var j=5;
var i=0;

It creates 3 variables:

1. Variable div containing all div elements on the page
2. Variable j containing the value 5
3. Variable i containing the value 0

The reason typeof returns 'object' is because the typeof operator in JavaScript is messed up. It simply returns 'object' for most object-based entities, which include Arrays and NodeLists.

To answer your original question, both the return value from document.getElementsByTagName and document.querySelectorAll are NodeList. This means you will not be able to mutate them, unlike arrays. Furthermore, the value returned by document.getElementsByTagName is a live node list, which means it always reflects the current state of the DOM.

To clarify:

var liveNodeList = document.getElementsByTagName('div');
var nodeList = document.querySelectorAll('div');
console.log(liveNodeList.length, nodeList.length); //Should output the same value twice
document.body.appendChild(document.createElement('div')); //Add a new div to the DOM
console.log(liveNodeList.length, nodeList.length); //Now, the live node list length should be one more since it updated to reflect the DOM state

try{
    nodeList.push('test');
}catch(e){
    console.log('NodeLists may not be mutated');
}

Answer 2

var divs = document.getElementsByTagName("div"),
i=0;

is the same as

var divs = document.getElementsByTagName("div");
var i=0;

You can declare multiple variables with a single var by using a comma-separated list.