Получить второй LI

Есть длинный список ul:

          <ul>
  <li>...</li>
  <li>...</li>
  <li>...</li>
  ...
</ul>
        

Как наиболее эффективно получить второй LI?

Можно так:

var li = ul.getElementsByTagName('li')[1];

Или так:

var li = ul.querySelector('li:nth-child(2)');

Оба этих вызова будут перебирать детей UL и остановят перебор на найденном элементе.

А вот так – браузер найдёт все элементы, а затем выберет второй. Это дольше:

var li = ul.querySelectorAll('li')[1];

На практике разница в производительности будет видна только для действительно больших списков, либо при частом выполнении запроса. Браузер перебирает элементы весьма шустро.