Как перебрать все дочернии элементы на javascript

В этой статье я приведу пример, того как можно перебрать все дочернии элементы и получить их значения.
Для работы скрипта необходимо подключить библиотеку jQuery.
Рассмотрим такой пример: необходимо получить значения дочерних элементов, которые находятся в двух блоках с одинаковым id, и записать значения в массив.

Html будет такой:

<div id="parent_div">
	<span id="child_element">text 1</span>
	<span id="child_element">text 2</span>
	<span id="child_element">text 3</span>
</div>

<div id="parent_div">
	<span id="child_element">text 4</span>
	<span id="child_element">text 5</span>
	<span id="child_element">text 6</span>
</div>

var arrayData = []; // массив, для данных
var num = 0; // счетчик, для родительских елементов
$('div#parent_div').each(function(){ // перебираем все родительские елементы
	var oneDiv = $(this);
	var countSpan = oneDiv.find('span#child_element').length - 1; // считаем количество span'ов в одном родителе
	var spansData = []; // массив для данных из span'он одного родителя
	for(i = 0; i <= countSpan; i++){ // перебираем все span'ы одного родителя
		var dataSpan = oneDiv.find('span#child_element').eq(i).html(); // получаем данные из одного span'а
		spansData[i] = dataSpan; // записываем в массив данные
	}
	arrayData[num] = spansData; // записываем в основной массиы массив с данными из спанов одного родителя
	num ++; // увеличиваем счетчик родителей
});
console.log(arrayData); // выводим массив в консоль