Почему js работает с классами и перестаёт с id?

Question

[Aleksey]

Принимаю данные в input и передаю в блок. Почему с классами работает, а с id нет ?

Вариант с классами:

window.onload = function () { 
        let text = document.getElementByClassName('input-form')[0]; 
        let box = document.getElementsByClassName('box-text1')[0];
        text.oninput = function () { 
            box.innerText = this.value; 
        }
    }

Вариант с ID:

window.onload = function () {
        let text = document.getElementById('input-form')[0];
        let box = document.getElementById('box-text1')[0];
        text.oninput = function () {
            box.innerText = this.value;
        }
    }

Answer 1

[Тигран Абрамян]

Потому что классов может быть много а айди должен быть уникальным и один.
В этом случае заметьте

let box = document.getElement s ByClassName('box-text1')[0];

Значит много.

Вот вписывая это.

let box = document.getElementsByClassName('box-text1')[0];

Вы обращаетесь как к массиву.

А у айди уберите и сработает

let box = document.getElementById('box-text1')[0];

Answer 2

[Somewhere Intech]

getElementById вернёт первый элемент с переданным значением id, а так все элементы:
document.querySelectorAll('#input-form')