计算父、子、子节点

Question

我想知道如何获得parent - child - child - children - children的计数例如:

const parent = document.querySelectorAll('.parent');
parent.forEach(el => {
const ul = el.querySelector('.child3-child');
const div = document.createElement('div');
div.textContent = ul.childNodes.length;
el.append(div);
});

<div class="parent">
<div class="child1">
text
</div>
<div class="child2">
text
</div>
<div class="child3">
<ul class="child3-child">
<li>
some text...
</li>
<ul>
</div>
</div>

现在我想数一下<ul class="child3-child">有多少个子元素在这种情况下，它只有1个li。

Answer 1

• 用children代替childNodes。前者包括HTML元素，后者包括文本节点。
• 关闭你的</ul>标签，否则浏览器会认为它打开了一个嵌套元素。

const parent = document.querySelectorAll('.parent');
parent.forEach(el => {
const ul = el.querySelector('.child3-child');
const div = document.createElement('div');
div.textContent = ul.children.length;
el.append(div);
});

<div class="parent">
<div class="child1">
text
</div>
<div class="child2">
text
</div>
<div class="child3">
<ul class="child3-child">
<li>
some text...
</li>
</ul> <!--- This wasn't properly closed -->
</div>
</div>