Попытка получить элемент по классуName, похоже, не работает

Question

Попытка ввести динамический год в HTML-код.

Работает отлично с getElementById, но getElementsByClassName, похоже, не работает.

Вот мой код ...

HTML

<p>this year is <span class="year"></span></p> 

JAVASCRIPT

document.getElementsByClassName("year").innerHTML = new Date().getFullYear(); 

интересно посмотреть, что я делаю неправильно.

Answer 1

Вы получаете массив элементов с помощью этого метода. Чтобы получить доступ к первому элементу написать следующим образом:

document.getElementsByClassName("year")[0].innerHTML = new Date().getFullYear(); 

Answer 2

getElementsByClassName функция возвращает объект HTMLCollection.

Вы можете получить доступ к каждому элементу в коллекции с таким же синтаксисом, как массив:

var yearCollection = document.getElementsByClassName("year"); 
yearCollection[0].innerHTML = new Date().getFullYear(); 

Вы также можете использовать querySelector и querySelectorAll для извлечения элементов.

Использование querySelector результат является более удобным для чтения, на мой взгляд:

document.querySelector(".year").innerHTML = new Date().getFullYear(); 

querySelector и querySelectorAll использование CSS селекторы, чтобы получить элемент в DOM.

Для быстрого сравнения перфорации см: http://jsperf.com/selection-amdg2-azfne65