-1

I have a div with 4 checkbox. Then I run the following javascript:

var elements = document.getElementById('myDiv').getElementsByTagName('input');
alert(elements.length); // output: 4
for (element in elements) {
    alert(element);
}
alert('finish!');

After the 4, I get the following alerts, in that order:

0
1
2
3
item
namedItem
length
finish!

The numbers from 0 to 3 are the indexes of elements. But what does 'item', 'namedItem' and 'length' mean here?

Rodrigo
  • 4,706
  • 6
  • 51
  • 94
  • 2
    Don't use `for ... in ...` to loop over arrays, `for ... in ...` iterate over object properties, not indexes, so you will get all the properties of an array: http://stackoverflow.com/questions/500504/why-is-using-for-in-with-array-iteration-such-a-bad-idea – Holt Dec 17 '15 at 14:35
  • This will help: http://stackoverflow.com/questions/500504/why-is-using-for-in-with-array-iteration-such-a-bad-idea – ste2425 Dec 17 '15 at 14:36
  • Avoid `for...in` like the plague. – Shanoor Dec 17 '15 at 14:39
  • 1
    @Shan ...unless you want to iterate over properties of objects... – deceze Dec 17 '15 at 14:44
  • Although getElementsByTagName does not return a "real" array - for most pusposes it is still an array. So refer to questions listed in comments for more information on why it is a bad idea to iterate over arrays with for in. – Olga Dec 17 '15 at 14:44
  • Even using almost the same words of "Strange behavior in Javascript enhanced for…in loop", this question didn't show up in the list of "Questions that may already have your answer"... – Rodrigo Dec 17 '15 at 14:51
  • @deceze: there are much better ways and less random. Looping over `Object.keys(obj)` for example. – Shanoor Dec 17 '15 at 14:57
  • @Shan "Less random"? What does that mean? What are those "better ways"? – deceze Dec 17 '15 at 14:58
  • @deceze if you start using a library changing the prototype of built-in types, `for...in` will get extra properties and stuff. That's unpredictable behaviour, so "random" for me. – Shanoor Dec 17 '15 at 15:00
  • @Shan That's why you must use `.hasOwnProperty` when using `for..in`. Still curios what those "better ways" are then. – deceze Dec 17 '15 at 15:01
  • @deceze Looping over [Object.keys(obj)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys) for example. And it also works on arrays. – Shanoor Dec 17 '15 at 15:02
  • @Shan Yes, that's a possibility, but it's also possibly slower, due to having to loop twice (once to return the property names, then to actually enumerate them). `for..in .. if .hasOwnProperty` is the canonical established vanilla Javascript idiom... – deceze Dec 17 '15 at 15:08

3 Answers3

6

document.getElementById('myDiv').getElementsByTagName('input') does not return a true array. It is an array like object. So functions like forEach and map doesn't exist on it. And for ... in ... got a weird behavior with it.

You can convert it into a true array with slice :

var elements = Array.prototype.slice.call(document.getElementById('myDiv').getElementsByTagName('input'));
Magus
  • 14,796
  • 3
  • 36
  • 51
0

http://www.w3schools.com/jsref/coll_form_elements.asp As seen in this link you're outputing the properties and methods of your input elements.

George
  • 2,330
  • 3
  • 15
  • 36
-1

elements in your code is not javascript array, its an array-like object. It is actually HTMLCollection which has some additional enumerable properties.

The for...in statement iterates over the enumerable properties of an object.

see for...in and HTMLCollection

madox2
  • 49,493
  • 17
  • 99
  • 99