How to select all children of an element with javascript and change CSS property?

Question

I am working on a project that has a div with 32 children. I need to create a dropdown menu that will change the background of each div and the parent. For the other parts of the project that don't have children, I have been using the following code:

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> 

I could just add a different ID to each child (id1,id2,id3,...), but there are 32 children and not only would I have to add 32 IDs, but also 32 lines of Javascript. There has to be a better way; somehow selecting children or even changing the actual CSS code that selects the children.

Thanks, Ian

Answer 1

While this can be done in one line with JQuery, I am assuming you are not using JQuery - in which case, your code will be:

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

See http://jsfiddle.net/SxPxN/ for a quick example I created - Click on "change 'em" to see it in action

Answer 2

Try to use below codes:

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