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

在我的身体中，我有3 <a> s具有相同的ID和不同的颜色（红色，绿色和蓝色）来标识它们。设置具有相同ID的元素的innerHTML

<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>（用红色的颜色）将显示为“世界，你好！” Fiddle。

我改变我的脚本是：

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

结果仍然相同，仅在第<a>（用红色的颜色）显示为“世界，你好！”。

假设我希望所有的3 <a>都显示为“Hello world！”。我怎么做？

来源

2014-03-30 chris97ong

你不能有三个具有相同ID的元素。文档中的ID必须是** unique **。使用[验证器]（http://validator.w3.org）。 – Quentin

“具有相同ID的元素”这些不应该存在！这是什么课程的目的。 – Shomz

只是想知道：D – chris97ong

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

用getElementsByClassName代替getElementById代码中的每一个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>

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

见这里：http://jsfiddle.net/5uy7B/

来源

2014-03-30 08:59:21 Shomz

作为一个说明：qsa比getByClassName更好的支持。 – rlemon

的JavaScript，前提是ID是唯一的优化的getElementById。所以它总是只检索一个元素。

改为使用.getElementsByClassName()，并将通用类名应用于3个元素中的每一个。

来源

2014-03-30 09:00:51 Faust

从W3Schools的：

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

ID必须是唯一的文档宽，所以你的目的，你应该使用document.getElementsByClassName相反，它返回具有所有给定的类名称的所有子元素的数组。

来源

2014-03-31 13:02:31 user3368484

'getElementsByClassName'不返回数组。它返回一个非常不同的野兽，称为活动节点列表（当DOM自动改变时，它实际上会改变）。此外，getElementByID的行为未指定给非唯一的ID。 http://www.w3fools.com –

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

回答

相关问题