Возле каждого li вывести количество вложенных в него li, как это сделать?

Question

[Артём]

Пробовал через getElementsByTagName, но не могу по вложенным пройти.

Answer 1

[0xD34F]

вложенные li, например

<ul>
  <li><span>aaa</span></li>
  <li>
    <span>bbb</span>
    <ul>
      <li><span>bbb.1</span></li>
      <li>
        <span>bbb.2</span>
        <ul>
          <li><span>bbb.2.1</span></li>
          <li><span>bbb.2.2</span></li>
        </ul>
      </li>
      <li>
        <span>bbb.3</span>
        <ul>
          <li>
            <span>bbb.3.1</span>
            <ul>
              <li><span>bbb.3.1.1</span></li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

Если надо сосчитать количество "прямых" потомков (на один уровень вниз):

document.querySelectorAll('li').forEach(n => {
  const count = n.querySelectorAll(':scope > ul > li').length;
  n.querySelector('span').append(` (${count})`);
});

Если надо сосчитать количество всех li внутри текущего:

for (const n of document.getElementsByTagName('li')) {
  const { length: count } = n.getElementsByTagName('li');
  n.children[0].insertAdjacentText('beforeend', ' (' + count + ')');
}

Answer 2

[Алексей Лауд]

Подсказка

Можно делать так:

const someElement = document.getElementsByTagName("someTag");

А можно так:

const someChild = someElement.getElementsByTagName("someTag");