Come selezionare tutti i figli di un elemento con javascript e modificare la proprietà CSS?

Question

Sto lavorando a un progetto che ha un div con 32 bambini. Devo creare un menu a tendina che cambierà lo sfondo di ogni div e del genitore. Per le altre parti del progetto che non hanno figli, ho utilizzato il seguente codice:

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> 

ho potuto solo aggiungere un ID diverso per ogni bambino (id1 , id2, id3, ...), ma ci sono 32 bambini e non solo dovrei aggiungere 32 ID, ma anche 32 linee di Javascript. Ci deve essere un modo migliore; in qualche modo selezionando i bambini o addirittura cambiando il codice CSS effettivo che seleziona i bambini.

Grazie, Ian

Answer 1

Anche se questo può essere fatto in una sola riga con JQuery, io parto dal presupposto che non si utilizza JQuery - in questo caso, il codice sarà:

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; 
    } 
} 

Vedi http://jsfiddle.net/SxPxN/ per un rapido esempio ho creato - Clicca su "cambiare 'em" per vederlo in azione

Answer 2

tenta di utilizzare sotto codici:

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