JavaScript, пожалуйста, объясните этот синтаксис

Question

Я JS новичок читать о типах данных JS, который указал мне на Живых нодлист и Статических нодлисты на этих страницах: Why is getElementsByTagName() faster than querySelectorAll()? и HTMLCollections & NodeLists Упоминаются страниц описывают их различия, используя очень похожие примеры:

Живые нодлистов:

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

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

Статические нодлистов:

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

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

Я интересно в данном фрагменте кода:

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

соответственно. этот:

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

Может кто-нибудь, пожалуйста, уточните, что это за конструкция? Или, может быть, вопрос должен быть: каково содержимое и тип переменной divs после этого? Я предполагал, что это массив, так что я попробовал этот минималистичный JS vhere я добавил дополнительные переменные:

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

но не Mather, сколько другие переменным я не добавил к divs вместе с document.getElementsByTagName результатом alert() всегда был 1. Затем я попробовал распечатать его через typeof(), и он возвращает мне, что это объект. Что здесь происходит, это какой-то специальный синтаксический сахар JS или что?

Answer 1

Этот код:

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

То же самое, как это:

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

Это создает 3 переменные:

1. Variable DIV, содержащий все элементы DIV на странице
2. Переменная j, содержащая значение 5
3. переменной я содержащий значение 0

Причина TypeOf возвращает «объект», потому что оператор TypeOf в JavaScript перепутались. Он просто возвращает «объект» для большинства объектов, основанных на объектах, которые включают в себя массивы и узловые списки.

Чтобы ответить на исходный вопрос, как возвращаемое значение из document.getElementsByTagName, так и document.querySelectorAll - это NodeList. Это означает, что вы не сможете их мутировать, в отличие от массивов. Кроме того, значение, возвращаемое документом.getElementsByTagName - это список живых узлов, что означает, что он всегда отражает текущее состояние DOM.

Для уточнения:

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; 

такое же, как

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

Вы можете объявить несколько переменных с одним var, используя разделенный запятыми список.