Почему не срабатывает forEach()?

Question

[Dvorak]

<p class='dep'>one</p>
	<p class='dep'>two</p>
	<p class='dep'>three</p>
	<p class='dep'>four</p>
	<p class='dep'>five</p>
	<p class='dep'>six</p>

var dependent=document.getElementsByClassName('dep');

	dependent.forEach(function(item, i, arr) {
	  alert( i + ": " + item + " (массив:" + arr + ")" );
	});

Почему не работает?

Comments

[coderisimo]

потому, что HTMLCollection , который вы получаете не поддерживает forEach напрямую

попробуйте вот так :
var dependent=document.getElementsByClassName('dep');
Array.prototype.forEach.call(dependent, function(el) {
alert(el.innerHTML);
});

Answer 1

[Денис]

forEach работает с массивом, а у вас коллекция узлов (NodeList ). И советую использовать не getElementsByClassName, а querySelector/querySelectorAll. Всё-таки кроссбраузерней, да и удобней, когда селектор сложный.

var dependent = document.querySelectorAll('.dep');
[].forEach.call(dependent, function(item, i, arr) {
    alert(i + ": " + item + " (массив:" + arr + ")");
});

Вариант второй - преобразуем NodeList в массив и работаем с ним уже соответственно:

var dependent = [].slice.call(document.querySelectorAll('.dep'));
dependent.forEach(function(item, i, arr) {
    alert(i + ": " + item + " (массив:" + arr + ")");
});