为何使用innerHTML修改div内容后页面未显示更新？

嘿，我一眼就瞅出问题在哪了！你用的document.getElementsByClassName('text')返回的不是单个DOM元素，而是一个HTMLCollection（元素集合）——哪怕页面里只有一个匹配的元素，它也会返回一个类数组的集合。

你直接给这个集合设置innerHTML，其实根本没作用到目标<div>上。至于为啥alert会弹出'hey'？这是浏览器的一个奇怪兼容行为：当你读取集合的innerHTML属性时，它会自动取集合里第一个元素的对应值，但赋值的时候可不会这么智能，所以页面上的内容纹丝不动，alert却能拿到你刚赋的那个值（但实际DOM根本没更新）。

给你两个修正方案：

方案1：从集合中取出第一个元素 #

修改你的函数，把集合的第一个元素取出来再操作：

function changehtml() { 
  var text = document.getElementsByClassName('text'); 
  text[0].innerHTML = 'hey'; // 加上[0]取第一个元素
  alert(text[0].innerHTML) 
}

方案2：用querySelector直接获取单个元素 #

如果确定页面里只有一个class为text的元素，用document.querySelector('.text')更省心，它直接返回匹配的第一个DOM元素：

function changehtml() { 
  var text = document.querySelector('.text'); 
  text.innerHTML = 'hey'; 
  alert(text.innerHTML) 
}

这样再点击div，页面上的文本就会变成'hey'啦！

内容的提问来源于stack exchange，提问作者notReallyDev