Как выбрать всех дочерних элементов элемента с javascript и изменить свойство CSS?

Я работаю над проектом, у которого есть div с 32 детьми. Мне нужно создать раскрывающееся меню, которое изменит фон каждого div и родителя. Для других частей проекта, у которых нет детей, я использовал следующий код:

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>

Я мог бы просто добавить другой идентификатор для каждого дочернего элемента (id1, id2, id3,...), но есть 32 ребенка, и мне не только придется добавить 32 идентификатора, но также 32 строки Javascript. Там должен быть лучший путь; каким-то образом выбирая детей или даже изменяя фактический CSS-код, который выбирает детей.

Спасибо, Ян

Ответы

Ответ 1

Хотя это можно сделать в одной строке с JQuery, я предполагаю, что вы не используете JQuery - в этом случае ваш код будет:

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

См. http://jsfiddle.net/SxPxN/ для быстрого примера, который я создал. Нажмите "изменить" их, чтобы увидеть его в действии

Ответ 2

Попробуйте использовать ниже коды:

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

Ответ 3

Если существует только один родительский элемент, то мы можем использовать querySelector чтобы выбрать все дочерние элементы этого элемента.

HTML

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

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

Если есть больше родительских элементов, имеющих тот же класс, то мы можем использовать querySelectorAll и 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>

let children = document.querySelectorAll(".parent")
children.forEach(child => {
  child.style.color = "red";
})