A forma de contar depende muito do que você quer dizer com "li's dentro de uma div".
No seu caso específico, bastaria fazer document.querySelectorAll('#collapse305 li').length
, como sua própria resposta indicou.
Mas e se tivermos um HTML assim:
<div id="collapse305">
<div class="panel-body">
<ul id="lista1">
<li>Test1</li>
<li>Test2</li>
<li>Test3</li>
<li>
Test4
<ul id="sublista1">
<li>Subtest4.1</li>
<li>Subtest4.2</li>
</ul>
</li>
</ul>
<p>blablabla</p>
<ul id="lista2">
<li>Test5</li>
<li>Test6</li>
</ul>
<div id="outra">
<ul id="lista3">
<li>Test7</li>
<li>Test8</li>
<li>
Test9
<ul id="sublista3">
<li>Test10</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
Você quer contar todos os elementos li
? Ou somente os do primeiro ul
? Ou só os que não estão aninhados? Ou só os do primeiro nível?
Por exemplo, se eu fizer document.querySelectorAll('#collapse305 > div > ul > li')
, ele só vai pegar Test1
, Test2
, Test3
, Test4
, Test5
e Test6
, já que o >
só pega elementos que são descendentes diretos, ou seja, #collapse305 > div
só pega a div
que é filha imediata do elemento cujo id
é collapse305
(que no caso é a div class="panel-body"
), depois > ul
só pega os elementos ul
que são filhos diretos desta div class="panel-body"
(ou seja, somente os elementos ul
cujos id's são lista1
e lista2
), e por fim > li
vai pegar somente os elementos li
que são filhos diretos destes ul
's (por isso ele não pega o Subtest4.1
e nem Subtest4.2
, já que estes não são filhos diretos de lista1
).
Já quando você não usa >
, ele pega os descendentes daquele elemento, independente de serem filhos diretos (ou seja, podem ser "netos", "bisnetos", etc). Veja mais sobre esses seletores aqui.
Isso permite várias formas diferentes de contar. Por exemplo, se remover um >
do seletor: document.querySelectorAll('#collapse305 div > ul > li')
.
Agora ele vai pegar qualquer div
dentro de collapse305
, o que quer dizer que além da div class="panel-body"
, também será pego a div id="outra"
, e com isso o ul id="lista3"
também será considerado. Porém, só serão pegos os li
's que são filhos diretos deste ul
, e por isso o Test10
fica de fora. O resultado será Test1
, Test2
, Test3
, Test4
, Test5
, Test6
, Test7
, Test8
e Test9
.
Mas se eu mudar para document.querySelectorAll('#collapse305 > div > ul li')
, agora eu pego todos os li
's dentro de lista1
e lista2
, ou seja, Test1
, Test2
, Test3
, Test4
, Subtest4.1
, Subtest4.2
, Test5
e Test6
.
Claro que para casos mais simples como o seu (dentro da div
só existe um ul
sem li
's aninhados), não fará diferença. Mas dependendo de como está o HTML e do que você quer considerar na contagem, usar o seletor correto pode fazer toda a diferença.