如何使用javascript选择元素的所有子元素并更改CSS属性？

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

Answer 3

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

Answer 4

var children = document.getElementById("div").children;
var i;
for (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.

Answer 5

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