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

Question

在我体内，我有3个<a>个具有相同ID和不同颜色（红色，绿色和蓝色）的标识。

<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!";

因此，只有第一个<a>（颜色为红色）才会显示为＆＃34; Hello world！＆＃34; Fiddle

我将脚本更改为：

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

结果保持不变，只有第一个<a>（颜色为红色）显示为＆＃34; Hello world！＆＃34;。

假设我希望所有3 <a>出现为＆＃34; Hello world！＆＃34;。我该怎么做？

Answer 1

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

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

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/

Answer 2

javascript在假设id是唯一的情况下优化getElementById。所以它总是只检索一个元素。

使用.getElementsByClassName()，并为3个元素中的每个元素应用一个公共类名。

Answer 3

来自w3schools：

  

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

ID必须在文档范围内是唯一的，因此为了您的目的，您应该使用document.getElementsByClassName代替，它返回包含所有给定类名的所有子元素的数组。