简单的JQuery选择器工作，vanilla js不是

Question

这不是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

Answer 1

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

访问要更改的那个

这将是一个简单的修复：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;