简单的 JQuery 选择器工作，vanilla js 不是 [重复]答案

【问题标题】：Simple JQuery selector working, vanilla js isn't [duplicate]简单的 JQuery 选择器工作，vanilla js 不是 [重复]
【发布时间】：2016-07-02 07:31:21
【问题描述】：

这不是 querySelectorAll 的副本，因为它也不适用于 querySelector

我的 js 文件中有以下代码。 JQuery 工作正常，香草 js 不工作，我很想知道为什么！感谢您的帮助！

$(document).ready(function() {

$('.chartContainer').text('bar-1'); //works
document.querySelectorAll('.chartContainer').innerHTML[0] = 'bar-2'; //doesn't work
document.querySelector('.chartContainer').innerHTML = 'bar-3'; //doesn't work

输出（来自 chrome 检查器）：

<div class="chartWrapper"><div class="chartContainer">bar-1</div></div>

我使用 Jade 作为我的模板引擎，这是我使用的代码：

.chartWrapper
      .chartContainer foo

【问题讨论】：

向我们展示您尝试操作的 html 文件部分。
你有1个还是多个'.chartContainer'？
我尝试了 querySelector 和 querySelectorAll。我在示例中使用了 querySelectorAll，但结果都是一样的。
这是您的解决方案：window.onload=function(){ document.querySelectorAll('.chartContainer')[0].innerHTML = 'bar-2'; } 您需要确保仅在呈现 div 时执行代码。这在我的电脑上工作，我希望它能解决你的问题。

标签： javascript jquery node.js express

【解决方案1】：

无论您是否只有 1 个或多个 chartContainer 类元素，querySelectorAll 函数都会返回一个列表/一个元素数组。因此，您应该使用索引运算符[] 访问要更改的那个

这将是一个简单的修复：

document.querySelectorAll('.chartContainer')[0].innerHTML = 'bar-2';

&lt;div class="chartWrapper"&gt;&lt;div class="chartContainer"&gt;bar-1&lt;/div&gt;&lt;/div&gt;

【讨论】：

感谢您的关注，我迫不及待地尝试过，但效果不佳：
那么我们需要查看您正在使用的 HTML
@RonI 你确定你的代码在 DOM 加载后还在运行吗？
@RonI 它在这里工作正常：jsfiddle.net/barmar/c5z98nxr
@Barmar - 我使用 $(document).ready(function() {