设置具有相同ID的元素的innerHTML

Question

在我的身体里我有3

<a id="hello" style="color: Red;">[Blank]</a>
<a id="hello" style="color: Green;">[Blank]</a>
<a id="hello" style="color: Blue;">[Blank]</a>

在我的剧本中，我有这样一个：

document.getElementById("hello").innerHTML = "Hello world!";

因此，只有第一个

我把我的脚本改成这样：

for(var i = 0; i < 3; i++) {
    document.getElementById("hello").innerHTML = "Hello world!";
}

结果保持不变，只有第一个

假设我想要全部3个




Answer 1

来自w3学校：

getElementById（）方法访问具有指定id的第一个元素。

ID必须是文档范围内唯一的，因此出于您的目的，您应该使用文档。改为GetElementsByCassName，它返回具有所有给定类名的所有子元素的数组。

Answer 2

javascript在假定ID是唯一的基础上优化getElementById。所以它总是只检索一个元素。

相反，使用. getElementsByClassName（），并对3个元素中的每个元素应用一个公共类名。

Answer 3

这就是类的用途，ID是唯一的。

用getElementsByClassName替换代码中的每个getElementById，就可以开始了。

HTML

<a class="hello" style="color: Red;">[Blank]</a>
<a class="hello" style="color: Green;">[Blank]</a>
<a class="hello" style="color: Blue;">[Blank]</a>

JS

var elems = document.getElementsByClassName("hello");
for(var i = 0; i < elems.length; i++) {
    elems[i].innerHTML = "Hello world!";
}

请看这里：http://jsfiddle.net/5uy7B/