如何仅选择 div 的子 div（而不是“孙子” div 等）？

Posted 2023-03-05

【中文标题】如何仅选择 div 的子 div（而不是“孙子” div 等）？

【英文标题】：How can I select only the child divs of a div (and not "grandchildren" divs and so on)?

【发布时间】：2020-02-04 21:03:10

【问题描述】：

我有一个递归函数，可以根据用户的要求在 div 中创建 div，但我偶然发现了一个问题，我需要以特定方式分隔这些 div，类似于“层”。 例子： 我创建了一个 div，firstborn - 在其中，用户创建了另一个 div（我们称之为一个子 div）。在这个辅助 div 中，用户创建了另一个 div（以及这个孙 div） - 我需要知道第一个 div 的子 div 的数量，以及子 div 拥有的子 div 的数量（孙 div）

我偶然发现了这个问题，因为我试图获取它们的方式是：

numberOfFirstbornDivs = document.getElementsByClassName("firstBornDiv").length
numberOfChildrenDivs = document.getElementsByClassName("recursivelyCreatedDiv")[index].getElementsByClassName("recursivelyCreatedDiv").length

我想要的是仅在第一个“层”下名为“recursivelyCreatedDiv”的 div 的数量，但相反，我从所有后续“层”中获取 div 的数量（在给定的示例中，我想要： numberOfFirstbornDivs = 1 和 numberOfChildrenDivs = 1, 但相反，我得到： numberOfFirstbornDivs = 1 和 numberOfChildrenDivs = 2)。

我知道发生这种情况是因为我用相同的 ClassName 命名了我的 div，但我不知道如何解决这个问题，因为它们是递归创建的（并且是根据用户的要求）。

【参考方案1】：

要仅选择元素的直接子元素，您可以使用 '>' css 选择器，而不是通过类名获取元素。

例如，.firstBornDiv > .recursivelyCreatedDiv 将定位所有具有 recursivelyCreatedDiv 类的元素，这些元素是具有 firstBornDiv 类的 div 的直接子元素

编辑 1：更准确地说，您可以将 querySelectorAll() 方法与任何 css 选择器一起使用，以获取选择器所针对的元素数组，这正是您在此答案中所需要的。

【讨论】：

谢谢！这正是我所需要的。

编辑：这不起作用，但确实像它做的那样，不幸的是它并没有解决我的问题。