我有一个像这样用 html 制作的网格
<div class="grid-container" id="grid-container">
<div class="grid-row">
<div class="grid-cell red"><p class="label">R</p></div>
<div class="grid-cell"></div>
<div class="grid-cell blue"><p class="label">B</p></div>
</div>
<div class="grid-row">
<div class="grid-cell"></div>
<div class="grid-cell white"><p class="label">W</p></div>
<div class="grid-cell"></div>
</div>
<div class="grid-row">
<div class="grid-cell"></div>
<div class="grid-cell blue"><p class="label">B</p></div>
<div class="grid-cell blue"><p class="label">B</p></div>
</div>
</div>
我希望能够分别对每个单元格进行 JavaScript 更新。为此,我尝试编写一个脚本来获取网格的所有子节点,然后再次获取每一行的子节点。然而,当我测试输出时,三行返回正常,但它们的子项返回 7 个对象而不是 3 个。我很困惑......
function myFunction() {
var c = document.getElementById("grid-container").childNodes;
var b;
var txt = "";
for (var i = 0; i < c.length; i++) {
txt = txt + "Row: " + c[i].nodeName + "<br>";
b = c[i].childNodes;
for (var j = 0; j < b.length; j++) {
txt = txt + "Cell: " + b[i].nodeName + " Value: " + b[i].className + "<br>";
}
}
document.getElementById("demo").innerHTML = txt;}
这是它给我的输出:
最佳答案
为了给 Loilo 写一个答案,只需使用 children
而不是 childNodes
关于javascript - 使用javascript在html中获取子节点和子节点,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50822008/