如何为循环中的所有子节点分配特定属性答案

【问题标题】：How to assign specific attribute to all childNodes in loop如何为循环中的所有子节点分配特定属性
【发布时间】：2017-12-28 09:03:11
【问题描述】：

我有一个 html 标签，里面有 n 个子循环。

<div class="class1 " id="id1" style="position: absolute; z-index: 12005; v left: -10000px; top: -10000px; width: 228px; height: 0px; font-size: 11px;">
    <div class="class2" id="id2" style="width: 228px;">
        <div class="class3">H1</div>
        <div class="class3">H2</div>
        <div class="class3">H3</div>
        <div class="class3">H4</div>
    </div>
</div>

我想为所有子 div 设置高度，例如 class1, class2,... 我在这里尝试使用的是

var myDiv2 = document.getElementByID('id2')
myDiv2 = childNodes.forEach({

})

【问题讨论】：

你想设置id为“id2”的div的所有子div的高度吗？
为什么不用css来做Layout呢？
目的没有解释清楚。如果您详细解释它或用适当的示例回答这些原因，您可以获得更好的建议。如果您只想将所有 div 元素的高度设置为与父元素相同，那么为什么不使用 CSS 继承属性并且不再需要 JS 支持。
如果您的问题真的是关于设置高度，我强烈建议您只使用 CSS，特别是因为您想要影响的所有元素已经具有相同的类名
亲爱的@David，您的问题和示例代码似乎相互矛盾。你想set height to all child div like class1, class2 .. 而你的示例代码说你只想在#id2 内更改高度，并且该节点内没有class1, class2 这样的类。请纠正问题。但是，如果您稍微操作一下，我给出的答案可能符合您的要求。

标签： javascript html

【解决方案1】：

如果你想设置id为'id2'的节点内每个div的高度，你应该使用这段代码为每个孩子设置100px的高度节点：

childList = document.getElementById('id2').childNodes
childList.forEach(function(item){
    item.style.heigth="100px"
});

请注意，childList 表示 id 为“id2”的节点内所有节点的NodeList。变量item代表Node本身

【讨论】：

【解决方案2】：

如果要设置所有子div的高度，可以使用css。

.class2 .class3{height:100px;}

或者如果你想使用javascript，那么你可以使用

var parentDiv = document.getElementById("id2");
var children = parentDiv.children;
for(var i = 0; i < child.length; i++){
 child[i].style.color = "green";
}

【讨论】：

【解决方案3】：

试试document.querySelectAll。

setTimeout(myFunction, 1000);

function myFunction() {
  var x = document.querySelectorAll("#id2 > [class^='class']");
  x.forEach(function(elem) {
    elem.style.height = "30px"
  });
}

/** css for testing **/

div {
  border: 1px solid red;
  color: red;
  padding: 4px;
  margin: 4px;
  width: 100%;
}

<div class="class1 " id="id1" style="width: 228px; height: 0px; font-size: 11px;">
  <div class="class2" id="id2" style="width: 228px;">
    <div class="class3">H1</div>
    <div class="class3">H2</div>
    <div class="class3">H3</div>
    <div class="class3">H4</div>
  </div>
</div>

其他解决方案将使用旧的 javascript

function setElementHeightWhereClassMatching(elem, className, height) {
  if (elem.children.length > 0) {
    var childList = elem.children,
      i;
    for (i = 0; i < childList.length; i = i + 1) {
      if (className.test(childList[i].getAttribute("class"))) {
        childList[i].style.height = height;
        if (childList[i].children.length > 0) {
          setElementHeightWhereClassMatching(childList[i], className, height)
        }
      }
    }
  }
}

function myFunction() {
  var parent = document.getElementById('id1');
  setElementHeightWhereClassMatching(parent, new RegExp('class[\\d]+'), '40px');
  console.log('all class inside id1 changed to 40px height');
}

setTimeout(myFunction, 1000);

function my2Function() {
  var parent = document.getElementById('id2');
  setElementHeightWhereClassMatching(parent, new RegExp('class[\\d]+'), '15px');
  console.log('all class inside id2 changed to 10px height');
}

setTimeout(my2Function, 3000);

div#id1,
div#id1 div {
  border: 1px solid red;
  color: red;
  padding: 4px;
  margin: 4px;
  display: inline-block;
  width: 100%;
}

<div class="class1 " id="id1" style="width: 228px; height: 0px; font-size: 11px;">
  <div class="class2" id="id2" style="width: 228px;">
    <div class="class3">H1</div>
    <div class="class3">H2</div>
    <div class="class3">H3</div>
    <div class="class3">H4</div>
  </div>
</div>

【讨论】：

我收到Object doesn't support property or method 'forEach'。
@NinaScholz 我确定 forEach，同样适用于querySelectAll 参考：stackoverflow.com/a/20099008/465560
我正在使用边缘 40.15063.0.0
这是矫枉过正和错误的。如果标记发生变化并且另一个类名被添加到类列表中，在现有的之前怎么办？此代码将简单地停止执行所需的操作。此外，这将影响示例中的所有 div，而不仅仅是子项。
@NinaScholz 我不确定，但您可以尝试使用旧的 javascript 解决方案。我没有要测试的Edge。