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

Question

[Bzeeng]

Есть вот такой список, почему длинна 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); // очищает список

Answer 1

[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.

Answer 2

[DevMan]

потому что перенос строки/пробелы/табы так же являются нодой.
https://jsfiddle.net/s5kz236b/