@Bzeeng

Почему length === 13?

Есть вот такой список, почему длинна childNodes равна 13, и как известно remove удаляя элемент сдивигает массив, и если указать 0 в elem.childNodes[0].remove(), а не i, то по сути он должен удалить все элементы, но остается последние элементы 3,4,5, хотя они тоже должны удалятся, почему так?
И почему elem.childNodes[i].remove(); не удаляет все li когда ставим индекс i?
<ol id="elem">
   <li>1</li>
    <li2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ol>

function clear(elem) {  
   for (let i=0; i < elem.childNodes.length; i++) {
     console.log(elem.childNodes.length);  // length === 13 what?
     elem.childNodes[0].remove();
      
  }
  }
  clear(elem); // очищает список
  • Вопрос задан
  • 163 просмотра
Решения вопроса 2
Stalker_RED
@Stalker_RED
В вашем примере сразу два косяка

1. там действительно 13 нод (узлов), потому что Node это не только html-элементы, но и текст между ними (переводы строки и пробелы в вашем случае).
Можно перебирать не childNodes а .children, который возвращает именно html-элементы, а не все узлы. Но это решает не все проблемы, потом что:

2. Указывая не 0 а i вы удаляете не все узлы, а каждый второй.
Дело в том, что childNodes и children это live коллекции и они обновляются при каждом изменении в родительском элементе.
При удалении нулевого элемента первый тут-же становится нулевым.
Затем вы увеличиваете i до единицы, удаляете первый (он изначально был вторым), а нулевой (который был первым) остался, и снова происходит сдвиг. Иногда, кстати, этот сдвиг не упевает произойти, так что этим способом нельзя пользоваться даже если вам хочется удалить именно каждый второй.

Можно бы перебирать с конца
for (let i=elem.children.length-1; i >= 0; i--) elem.childNodes[i].remove()


Можно удалять без всяких счетчиков
while (elem.firstChild) elem.removeChild(myNode.lastChild)


И наконец, можно удалять вообще без перебора! elem.textContent = '' Это не только самый короткий, но и самый быстрый способ, т.к. браузер не будет пытатся несколько раз перерисовать содержимое elem.
Ответ написан
DevMan
@DevMan Куратор тега JavaScript
потому что перенос строки/пробелы/табы так же являются нодой.
https://jsfiddle.net/s5kz236b/
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Artezio Нижний Новгород
от 130 000 до 180 000 ₽
Artezio Москва
от 160 000 до 220 000 ₽
19 янв. 2021, в 18:59
40000 руб./за проект
19 янв. 2021, в 18:41
1000 руб./за проект