How the for ... in statement works in javascript

Navigation
2

Good, a question has arisen with the function for...in of javascript, and I do not know if it is because I am using it badly, but it does not work for me. I am trying to apply to several elements of the DOM with querySelectorAll and I try to apply to all elements the style with for...in in this way; 

var capas = document.querySelectorAll('div');
for (var i in capas) {
    capas[i].style.transition = 'all 2s';
}
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>

The console tells me that capas[i].style is undefined and I do not understand why. The problem I solved with the method forEach() 

capas.forEach(function (capas) {
   capas.style.transition = 'all 2s';
});

so my question is regarding the use of for...in (which I have not seen anywhere that is obsolete).

Am I misusing the sentence or am I misusing it? Why are you checking undefined the elements?

    
asked by asantana o 06.11.2017 в 11:35
source

3 answers

5

The problem is not how the for...in instruction works, but how the querySelectorAll method works.

This method does not return an array, it returns a NodeList object with a series of properties ('0', '1', '2', ...) that contain each of the elements of the result, a property length with the number of total elements and other methods ( item , entries , forEach , ...).

When traversing the object with a for...in what you do is accessing each of the properties and methods of the object as you can see in this example.

Indeed, the best way to traverse the elements of a NodeList object is to use the forEach method implemented in the object itself. 

var capas = document.querySelectorAll('div');

console.log(capas);

for (var i in capas){
  console.log(i);
}

capas.forEach(function (item){
  item.style.transition = 'all 2s';
});
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
    
answered by 06.11.2017 / 11:50
source
0

It marks you undefined because i is the value of the array element and when you put layers [i] you are trying to use it as an array index.

To work properly, you must have this form, taking your example: 

var capas = document.querySelectorAll('div');
for (var i in capas) {
    i.style.transition = 'all 2s';
}

In each iteration i refers to a div element

    
answered by 06.11.2017 в 11:47
0

According to what I have seen, these are the 2 easiest ways

All methods, whether getElementsByClassName , getElementsByTagName , querySelectorAll return an HTMLCollection, which is similar to an array, in v erdad, the only thing similar is that both can be iterated s, That is, they have indices (elemento[0], elemento[1], etc) , but do not have the methods of this. Then Array.from() creates an array, starting from an iterable object, as is HTMLCollection or also for...of that does not need to create an array, but it can already treat it as an array 

var capas = document.querySelectorAll("div");

for(var div of capas) div.innerHTML = 'Soy un div con id: ${div.id}';


var array = Array.from(capas);

for(var i in array) array[i].style.color = "blue";
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
    
answered by 06.11.2017 в 15:38
problem with the hover effect with bootstrap images 4 Error "No suitable driver found for jdbc: mysql: // localhost / dda" when connecting to MySql from Java