29

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

5
  • 1
    Have you tried a pure CSS solution? Shouldn't need any JS at all.
    – Hamish
    Mar 20, 2012 at 2:30
  • I would, but I have to use the dropdown menu to change the div's backgrounds, and I might be able to do that, but it would be extremely complicated.
    – Ian
    Mar 20, 2012 at 13:32
  • How about using .querySelectorAll() ? Jul 2, 2019 at 7:30
  • @GermaVinsmoke That wasn't an option back in 2012, but it would be a great one now. Why don't you post it as an answer?
    – Ian
    Jul 2, 2019 at 13:44
  • 1
    @Ian , as per your suggestion, I've posted an answer, I hope it'll help others. Jul 2, 2019 at 15:10

5 Answers 5

47

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

5
  • That isn't working at all. Here is the code I used: function changediv(color) { var nodes = document.getElementById('div1').childNodes; for(var i=0; i<nodes.length; i++) { nodes[i].style.background = color; } } Sorry if I am being really dumb here, I am new to Javascript.
    – Ian
    Mar 20, 2012 at 2:22
  • 1
    actually you need to filter it - please see my edited solution Mar 20, 2012 at 2:25
  • OK, I'll go ahead and try that
    – Ian
    Mar 20, 2012 at 13:20
  • This is a little better, but it only changed the first child of the parent div. And changing div to option doesn't do anything.
    – Ian
    Mar 20, 2012 at 13:30
  • so your child elements are divs right? if so, dont change div to option. can you post how your HTML looks like? did you try the fiddle I sent? jsfiddle.net/SxPxN Try editing that fiddle to get it close to your markup and see where you run into issues. Try putting alert statements in the JS function so you know which nodes are being worked on - for example: alert(nodes[i].nodeName); Mar 20, 2012 at 13:43
13

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

If there's only one parent element then we can use querySelector to select all the children of that element

HTML

<div class="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

JS

let children = document.querySelector(".parent").children;
children.style.color = "red";

If there are more parent elements having same class then we can use querySelectorAll and forEach

HTML

<div class="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>
<div class="parent">
  <div>7</div>
  <div>8</div>
  <div>9</div>
</div>

JS

let children = document.querySelectorAll(".parent").children;
children.forEach(child => {
  child.style.color = "red";
})
3
  • 3
    querySelectorAll doesn't return an array, so you need to use Array.from(children).forEach(...)
    – Ian
    Jul 2, 2019 at 15:13
  • I see, I've been trying things since afternoon and it wasn't returning array, thanks Jul 2, 2019 at 15:15
  • 1
    let children = document.querySelector('.parent') isn't actually selecting the child divs, but the parent. In your example, the children are just inheriting the style from the parent. Open up your dev tools and check the style of the parent and children after you do this and look where the styling is getting applied. Try let children = document.querySelector('.parent').children to actually select the child elements.
    – Derek K
    Dec 18, 2019 at 22:45
2

Simple you can use for each loop

HTML

<div id="wrapper">
    <div class="el">Element 1</div>
    <div class="el">Element 2</div>
    <div class="el">Element 3</div>
</div

JavaScript

const element =document.getElementById('wrapper');
if(element.hasChildNodes()){
element.childNodes.forEach((e, i)=>{
    console.log(e);
});
}
2
var children = document.getElementById("div").children;

for (let i = 0; i < children.length; i++) {
  children[i].style.visibility = "hidden";
}

I am creating a variable called children and in it I am getting the element with the id "div" and then using .children to select the children and put it into an array. Then I create var i and use a for loop to go through and change all of their CSS value. The program stops after it has gone through each of the child elements.

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.