в чем различие между getElementById i getElementsByClassName? [дубликат]

#javascript

        
             
                
                    
                        
                            На этот вопрос уже даны ответы здесь:
                            
                        
                    
                
                        
                            не работает .getElementsByClassName [дубликат]
                                
                                    (1 ответ)
                                
                        
                        
                            Почему идет ошибка like.addEventListener is not a function?
                                
                                    (1 ответ)
                                
                        
                                Закрыт 2 года назад.
            
                    
Собственно сам вопрос: почему когда пишу код по getElementById работает, а с getElementsByclassName
не работает ??

Это рабочий код

var img = document.getElementById('images');
var imagesArray = ["img/flower1.jpg", "img/flower2.jpg", "img/flower3.jpg", 
 "img/flower5.jpg", "img/flower6.jpg"];
var index = 0;

function changeimg(){
    img.setAttribute("src" ,imagesArray[index]);
    imdex++;
    if (imdex >= imagesArray.length) {
        imdex = 0;
    }
}

setInterval(changeimg, 5000);


Это не рабочий код 

var img = document.getElementsByClassName('images');
var imagesArray = ["img/flower1.jpg", "img/flower2.jpg", "img/flower3.jpg", 
 "img/flower5.jpg", "img/flower6.jpg"];
var index = 0;

function changeimg(){
    img.setAttribute("src" ,imagesArray[index]);
    imdex++;
    if (imdex >= imagesArray.length) {
        imdex = 0;
    }
}

setInterval(changeimg, 5000);

    

Ответы

Ответ 1

getElementsById - это один элемент, а getElementsByClassName - это живая коллекция
элементов. Вообще где указано getElements - это живая коллекция с элементами.

И что бы обратиться к элементу по getElementsByClassName нужно указывать индекс элемента,
к которому ты хочешь обратиться. А если ты хочешь ко всем элементом с данным классом,
то нужно создавать цикл:

Пример:

var elem = document.getElementsByClassName('class');

for(var i = 0; i < elem.length; i++){
  elem[i].innerHTML = 'Код'
};




Так же можно обращаться через новые функции: querySelector и querySelectorAll

document.querySelector('query selector') - это первый элемент с данным селектором.
document.querySelectorAll('query selector') - все элементы с данным селектором (коллекция
элементов. Нужно обращаться через индекс).  

Чем примечательная эта функция, так это тем, что в ней можно указывать те же селекторы,
что и в CSS. То есть, можно обратиться к элементам по атрибуту - [атрибут="его значение"],
по классу .element, по ID - #elem и по всем другим query селекторам.


Ответ 2

getElementById
getElementsByClassName
          ^


Второй возвращает коллекцию элементов, а не 1 элемент, как первый.


Ответ 3

Потому не работает, что getElementById возвращает один элемент, а getElementsByClassName
возвращает массив элементов.

Чтобы получить первый элемент попробуйте написать так:

var img = document.getElementsByClassName('images')[0];


Литература:

MDN: document.getElementsByClassName()

MDN: document.getElementById()