使用javascript获取html格式的子节点和子节点
使用javascript获取html格式的子节点和子节点
提问于 2018-06-13 00:38:59
我有一个用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;}下面是它给我的输出：
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50822008
复制相关文章
相似问题