Как я могу выбрать только дочерние div-ы div (а не div-внуки и т. Д.)?

Question

У меня есть рекурсивная функция, которая создает div внутри div'ов по требованию пользователя, но я наткнулся на проблему, в которой мне нужно разделить эти div'ы определенным образом, подобно «слоям». Пример: я создал div, первенец - и внутри него пользователь создал еще один 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 из всех последующих" слоев "(в данном примере я хотел иметь: numberOfFirstbornDivs = 1 и numberOfChildrenDivs = 1, но вместо этого я получаю: numberOfFirstbornDivs = 1 и numberOfChildrenDivs = 2).

Я понимаю, что это происходит потому, что я называю свои div'ы тем же ClassName, но я не знаю, как обойти это, поскольку они создаются рекурсивно (и по требованию пользователя).

Answer 1

Чтобы выбрать только прямые дочерние элементы элемента, вы можете использовать селектор '>' css вместо получения элементов по имени класса.

Например, .firstBornDiv> .recursivelyCreatedDiv будет нацеливаться на все элементы с классом recursivelyCreatedDivкоторые являются прямыми потомками div с классом firstBornDiv

Редактировать 1: Точнее, вы можете использовать метод querySelectorAll () с любым селектором css, чтобы получить массив элементов, на которые нацелен ваш селектор. вам понадобится с этим ответом.