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

【问题标题】：How to select all children of an element with javascript and change CSS property?如何使用 javascript 选择元素的所有子元素并更改 CSS 属性？
【发布时间】：2012-04-04 13:04:27
【问题描述】：

我正在做一个项目，该项目有一个 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>

我可以为每个孩子添加一个不同的 ID (id1,id2,id3,...)，但是有 32 个孩子，我不仅要添加 32 个 ID，还要添加 32 行 Javascript。一定有更好的方法;以某种方式选择子级，甚至更改选择子级的实际 CSS 代码。

谢谢，伊恩

【问题讨论】：

你试过纯 CSS 解决方案吗？根本不需要任何 JS。
我会，但我必须使用下拉菜单来更改 div 的背景，我也许可以这样做，但会非常复杂。跨度>
用.querySelectorAll()怎么样？
@GermaVinsmoke 这在 2012 年不是一个选择，但现在它会是一个很棒的选择。您为什么不将其发布为答案？
@Ian ，根据您的建议，我已经发布了答案，希望对其他人有所帮助。

标签： javascript

【解决方案1】：

var children = document.getElementById("div").children;

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

我正在创建一个名为 children 的变量，并在其中获取 id 为“div”的元素，然后使用 .children 选择子项并将其放入数组中。然后我创建 var i 并使用 for 循环遍历并更改其所有 CSS 值。程序在遍历完每个子元素后停止。

【讨论】：

【解决方案2】：

每个循环都可以使用的简单

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

【讨论】：

【解决方案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>

JS

let children = document.querySelector(".parent").children;
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>

JS

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

【讨论】：

querySelectorAll 不返回数组，所以需要使用Array.from(children).forEach(...)
我明白了，我从下午开始一直在尝试，但它没有返回数组，谢谢
let children = document.querySelector('.parent') 实际上并没有选择子 div，而是选择了父 div。在您的示例中，子级只是从父级继承样式。打开您的开发工具并在您执行此操作后检查父级和子级的样式，并查看样式应用的位置。尝试let children = document.querySelector('.parent').children 实际选择子元素。

【解决方案4】：

尝试使用以下代码：

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

【讨论】：

【解决方案5】：

虽然这可以用 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/ 了解我创建的一个简单示例 - 单击“更改它们”以查看它的实际效果

【讨论】：

那根本行不通。这是我使用的代码： function changediv(color) { var nodes = document.getElementById('div1').childNodes; for(var i=0; i
实际上你需要过滤它 - 请参阅我编辑的解决方案
好的，我去试试
这个稍微好一点，但它只改变了父div的第一个孩子。将div 更改为option 没有任何作用。
所以你的子元素是 div 对吧？如果是这样，请不要将 div 更改为选项。你能发布你的 HTML 的样子吗？你试过我送的小提琴吗？ jsfiddle.net/SxPxN 尝试编辑该小提琴以使其接近您的标记并查看您在哪里遇到问题。尝试在 JS 函数中添加警报语句，以便了解正在处理哪些节点 - 例如：alert(nodes[i].nodeName);