В чем разница в получении элементов в Jquery и JS?

[Malleys]

Стоит отметить, что коллекции найденных элементов могут быть двух типов NodeList или HTMLCollection. Коллекция это объект, который представляет список DOM-узлов. Коллекция может быть живой или статичной. Обычно коллекции являютя живыми, что означает, что коллекция оперирует актуальными данными, а не тем состоянием, которое было на момент создания коллекции.

Метод getElementsByTagName возвращает живую HTMLCollection, что видно в примере выше у рони.

Метод querySelectorAll возвращает статичную NodeList, т. е. это коллеция, состояние которой было зафиксировано во время её создания.

<div id="slider-13" class="test">
   <div class="rangeouter"></div>
   <div class="rangeinner"></div>
   <div class="rangeselector"></div>
   <div class="slider-line">
       <span>0</span>
       <span>1</span>
       <span>2</span>
       <span>3</span>
       <span>4</span>
   </div>
</div>

<table>
  <tr>
    <th></th>
    <th>DOM API</th>
    <th>jQuery</th>
  </tr>
  <tr>
    <td>до удаления</td>
    <td id="dom-before"></td>
    <td id="jq-before"></td>
  </tr>
  <tr>
    <td>после удаления</td>
    <td id="dom-after"></td>
    <td id="jq-after"></td>
  </tr>
</table>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
const selector = "#slider-13 span";
let domSpans = document.querySelectorAll(selector); // NodeList
//let domSpans = document.getElementById('slider-13').getElementsByTagName('span'); // HTMLCollection
let jqSpans = $(selector);

// до удаления
$("#dom-before").text(domSpans.length);
$("#jq-before").text(jqSpans.length);

// удаление
//domSpans[0].remove();
jqSpans.last().remove();

// после удаления
$("#dom-after").text(domSpans.length);
$("#jq-after").text(jqSpans.length);
</script>

Источник https://www.w3.org/TR/dom/