В чем отличие 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.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, является динамической. При изменении документа она моментально отражает все произведённые изменения.

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

Comments

[Sedbol]

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

[Пашенька]

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

[Sedbol]

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

[Пашенька]

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

Answer 2

[historydev]

querySelector выбирает и теги,и id,и классы,а className только классы.

Comments

[historydev]

Так-же можно выбрать элемент по атрибуту ".item[data-id=22]"

[Sedbol]

Владимир, Да дело все в том что элементы ы цикле создаются. И класс у них одинаковый! Мне интересно почему такое отличие получается?

[Михаил]

Sedbol, querySelector('.user') вернёт 1 элемент

[Sedbol]

Михаил, Извиняюсь не дописал All))) Просто копировал и пропустил

[Sedbol]

Михаил, Но смысл не меняется

[Михаил]

Sedbol, сделайте какой-то playground

[Пашенька]

Владимир, всё намного глубже)

[historydev]

like-a-boss, глубже гугл расскажет, а я очевидные отличия назвал)