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

Have you tried a pure CSS solution? Shouldn't need any JS at all. — Hamish, Mar 20 '12 at 02: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 '12 at 13:32
@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 02 '19 at 13:44
@Ian , as per your suggestion, I've posted an answer, I hope it'll help others. — Germa Vinsmoke, Jul 02 '19 at 15:10

Vijay Agrawal · Accepted Answer · 2012-03-20T03:09:36.773

48

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

edited Mar 20 '12 at 03:09

answered Mar 20 '12 at 02:08

Vijay Agrawal

3,751
2
23
25

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 – Ian Mar 20 '12 at 02:22
1

actually you need to filter it - please see my edited solution – Vijay Agrawal Mar 20 '12 at 02:25
OK, I'll go ahead and try that – Ian Mar 20 '12 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 '12 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? http://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); – Vijay Agrawal Mar 20 '12 at 13:43

score 13 · Answer 2 · answered May 15 '15 at 12:54

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

answered May 15 '15 at 12:54

Evan Hu

977
1
13
18

score 5 · Answer 3 · edited Mar 13 '20 at 08:49

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

edited Mar 13 '20 at 08:49

aProgrammer

23
4

answered Jul 02 '19 at 15:09

Germa Vinsmoke

3,541
4
24
34

3

`querySelectorAll` doesn't return an array, so you need to use `Array.from(children).forEach(...)` – Ian Jul 02 '19 at 15:13
I see, I've been trying things since afternoon and it wasn't returning array, thanks – Germa Vinsmoke Jul 02 '19 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 '19 at 22:45

score 2 · Answer 4 · edited Sep 27 '21 at 17:06

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.

score 2 · Answer 5 · answered Jul 06 '21 at 12:31

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

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

5 Answers5

Linked

Related