计算父子子节点

Question

所以我想知道如何获得父子子子项的计数，例如：

 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>