试图通过className获取元素似乎不起作用

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