innerHTML 不适用于 getElementsByClassName答案

【问题标题】：innerHTML isn't working with getElementsByClassNameinnerHTML 不适用于 getElementsByClassName
【发布时间】：2014-09-16 04:22:44
【问题描述】：

我只是一个初学者。我正在尝试使用innerHTML。我想我写了正确的代码，但它不起作用。当我单击触发器时，页面变为白色并显示状态：'connecting' 不知道问题出在哪里

请有人帮助我。

这是我的代码。

HTML 代码

<div class = "head">
<nav>
<a onClick="open()">

<div class = "body">
<div class = "bodyL">
<div class = "newsPnT">

JAVASCRIPT 代码

function open() {
   document.getElementsByClassName('newsPnT').innerHTML = "asdfasdfasdf";
}

我的代码有什么问题？

PS：我使用的是 Firefox Aurora。当我单击触发器时，“调试器 > 源”显示“正在等待源”。

【问题讨论】：

除了下面给出的答案（getElementsByClassName 返回一个类似数组的对象）之外，请注意innerHTML 会导致很多问题（安全性、DOM 回流）。上面的例子可以使用textContent。

标签： javascript firefox innerhtml

【解决方案1】：

getElementsByClassName() 返回包含元素的数组。

返回具有所有给定类名的所有子元素的类数组对象。在文档对象上调用时，将搜索完整的文档，包括根节点。您也可以在任何元素上调用 getElementsByClassName()；它只会返回具有给定类名的指定根元素的后代元素。

所以你需要像这样迭代数组并设置innerHTML，即

var elements = document.getElementsByClassName('myClass');
Array.prototype.forEach.call(elements, function(element) {
    element.innerHTML = 'Your text goes here';
});

还有一点小红包JSFiddle

【讨论】：

【解决方案2】：

className 'open' 似乎是 javascript 的关键字。我将 className 从“open”更改为“openThis”，这就是问题的解决方案。

【讨论】：