innerHTML 不适用于 getElementsByClassName

Posted 2023-05-07

【中文标题】innerHTML 不适用于 getElementsByClassName

【英文标题】：innerHTML isn't working with 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。

【参考方案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”，这就是问题的解决方案。