¿Cómo seleccionar todos los elementos secundarios de un elemento con javascript y cambiar la propiedad de CSS?

Question

Estoy trabajando en un proyecto que tiene un div con 32 hijos. Necesito crear un menú desplegable que cambie el fondo de cada div y el padre. Para las otras partes del proyecto que no tienen hijos, He estado usando el siguiente código:

function changediv(color) { 
document.getElementById('div1').style.background = color; 
} 

HTML:

<select> 
<option onClick="changediv('#555');">Hex</option> 
<option onClick="changediv('blue');">Colorname</option> 
<option onClick="changediv('url(example.com/example.png)');">Image</option> 
</select> 

tan sólo pudiera añadir un ID diferente para cada niño (ID1 , id2, id3, ...), pero hay 32 hijos y no solo tendría que agregar 32 ID, sino también 32 líneas de Javascript. Tiene que haber una mejor manera; de alguna manera seleccionando niños o incluso cambiando el código CSS actual que selecciona a los niños.

Gracias, Ian

Answer 1

Si bien esto puede hacerse en una línea con jQuery, estoy asumiendo que no está utilizando jQuery - en cuyo caso, el código será:

var nodes = document.getElementById('ID_of_parent').childNodes; 
for(var i=0; i<nodes.length; i++) { 
    if (nodes[i].nodeName.toLowerCase() == 'div') { 
     nodes[i].style.background = color; 
    } 
} 

Ver http://jsfiddle.net/SxPxN/ de un ejemplo rápido que creé - Haga clic en "cambiar 'em" para verlo en acción

Answer 2

intenta utilizar a continuación los códigos:

var nodes = document.getElementById('ID_of_parent').getElementsByTagName("div"); 
for(var i=0; i<nodes.length; i++) { 
    nodes[i].style.background = color; 
}