Стоит отметить, что коллекции найденных элементов могут быть двух типов 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/ |
Часовой пояс GMT +3, время: 18:41. |