getElementByClass节点innerHTML已更新，但未在DOM中更新

getElementByClass node innerHTML is updated, but not in DOM

本文关键字：DOM 更新 节点 innerHTML 已更新 getElementByClass      更新时间：2023-09-26

我的文档正文中有以下DOM结构：

<body>
<div id="spin"></div>
<div class="Main"></div>
<script src="//localhost:35729/livereload.js"></script>
</body>

我很难更新class='Main'的HTML。我使用的代码是

var selector = document.getElementsByClassName('Main');
selector.innerHTML = '<h1>This</h1>'

奇怪的是，如果我检查

selector.innerHTML

在chrome控制台内部，它被更新为html，但DOM和我的视图都没有更新。

var selector = document.getElementsByClassName('Main');

返回一组节点。所以做

selector.innerHTML = '<h1>This</h1>'

对dom没有影响。它只会更改包含节点的JavaScript对象。

你可以这样做：

selector[0].innerHTML = '<h1>This</h1>'

https://developer.mozilla.org/en-US/docs/Web/API/document.getElementsByClassName

是的，永远不要使用innerHTML。

这是一个专有的Microsoft JScript方法，是的，它在某个地方的规范中被继承了，但这并不意味着你应该使用它。问题是innerHTML将代码视为文本，而不是代码。因此，它不将代码序列化到DOM中，只转储一堆文本，每个渲染引擎都必须弄清楚该如何处理它

alert(new XMLSerializer().serializeToString(document.getElementsByClassName('Main')));

也不要将元素、属性和值大写，因为这是一种松懈的做法。严格的代码是好的代码，你总是知道该期待什么，是你现在完成事情的方式，而不是三天后。

相关文章：