У меня есть требование, где я должен забрать последний.div внутри контейнера и применить к нему некоторую бизнес-логику. Выбор последнего.div должен быть динамическим, потому что у пользователя есть возможность добавлять / удалять.div элементы.

Изначально я пытался сquerySelectorAll но это не похоже на работу. Поэтому я решил изменить его наgetElementsByClassName и на удивление это работало с той же логикой. Может кто-нибудь, пожалуйста, помогите мне объяснить причину, почемуremove_div Безразлично»пока работает второй (remove_div_2) делает?

Примечание: я не ищу решение / решение проблемы, потому что я уже приступил ко второму варианту. Я просто хочу знать причину, почему вариант сquerySelectorAll Безразлично»т работа.

Ниже мой код:

HTML:

    This is Div 1
    This is Div 2
    This is Div 3

Append Div
Remove Div
Remove Div 2

JavaScript:

window.onload = function () {
    var elementToStyle = document.querySelectorAll("#container .div");
    elementToStyle[elementToStyle.length - 1].classList.add('red');

    document.getElementById('append_div').onclick = function () {
       var divToInsert = document.createElement('div');
       divToInsert.id = 'new_div';
       divToInsert.className = 'div';
       divToInsert.innerHTML = 'This is an appended div';
       document.getElementById('container').appendChild(divToInsert);
       var elToStyle = document.querySelectorAll("#container .div");
       for (i = 0; i < elToStyle.length; i++)
           elToStyle[i].classList.remove('red');
           elToStyle[elToStyle.length - 1].classList.add('red');
       };

       document.getElementById('remove_div').onclick = function () {
           var elToStyle = document.querySelectorAll("#container .div");
           document.getElementById('container').removeChild(elToStyle[elToStyle.length - 1]);
           elToStyle[elToStyle.length - 1].classList.add('red');
       };

       document.getElementById('remove_div_2').onclick = function () {
           var elToStyle = document.getElementsByClassName('div');
           document.getElementById('container').removeChild(elToStyle[elToStyle.length - 1]);
           elToStyle[elToStyle.length - 1].classList.add('red');
       };
   }