В чем отличие document.querySelectorAll() от document.getElementsByClassName()?

Question

[Sedbol]

Почему такое отличие? Почему по такому методу удаляются не все элементы?

var uid_del_m =  document.getElementsByClassName('user');
for (let i=0;uid_del_m.length>i;i++){
uid_del_m[i].parentNode.removeChild(uid_del_m[i]);
}

А с querySelector все срабатывает нормально

var uid_del_m =  document.querySelectorAll('.user');
for (let i=0;uid_del_m.length>i;i++){
uid_del_m[i].parentNode.removeChild(uid_del_m[i]);
}

Если выводить в консоль то коллекции не чем не отличаются. Почему так происходит?

Comments

[Andrew]

Не все, это когда больше 2?)

Answer 1

[0xD34F]

Если выводить в консоль то коллекции не чем не отличаются.

Это не так. В первом случае HTMLCollection, во втором NodeList. Отличие первой от второго состоит в том, что

HTMLCollection, хранящая элементы DOM, является динамической. При изменении документа она моментально отражает все произведённые изменения.

То есть, обходите коллекцию, и одновременно модифицируете её. Удалили нулевой элемент - на его место встал первый, а индексу сделали ++. На следующей итерации удалять будете первый, и новый нулевой / бывший первый уже никуда не денется. Как и остальные элементы, изначально имевшие нечётные индексы.

Как удалять элементы динамической коллекции без пропусков:

// вариант раз - меняем направление обхода, от конца к началу:
for (let i = elements.length; i--;) {
  elements.item(i).replaceWith();
}

// вариант два - удаляем нулевой элемент коллекции, пока он существует:
for (let n; n = elements[0]; n.remove()) ;

Comments

[Sedbol]

Аааа все понял спасибо!!!))) Теперь ясно мне почему так происходит.

[Пашенька]

Sedbol, коллекция то живая!

[Sedbol]

like-a-boss, Почему Володька сбрил усы?

[Пашенька]

Sedbol, я не высекаю вашего юмора.