3

Собственно сам вопрос: почему когда пишу код по 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);
Yuri
  • 15,957
Rahmon Saidov
  • 31

3 Answers3

5

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 селекторам.

Yuri
  • 15,957
  • Это не массив. Это другая коллекция, причём живая. – Qwertiy Mar 10 '17 at 18:42
  • @Qwertiy, не все поймут, что такое живая коллекция – Yuri Mar 10 '17 at 18:45
  • Это не повод заведомо неверно её называть. Например, я в своём ответе сказал просто "коллекция" без дополнительных уточнений. Но если хочется расписать, то можно и поподробнеее. – Qwertiy Mar 10 '17 at 18:47
  • 1
    @Qwertiy, ой всё :) – Yuri Mar 10 '17 at 18:47
  • @Qwertiy, редактировал – Yuri Mar 10 '17 at 18:50
  • Уже заметил и плюс поставил) – Qwertiy Mar 10 '17 at 18:53
1
getElementById
getElementsByClassName
          ^

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

Qwertiy
  • 123,725
1

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

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

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

Литература:

MDN: document.getElementsByClassName()

MDN: document.getElementById()

GHosT
  • 513