通过javascript ES6将css类添加到第一个孩子

Question

这是我的 html，它是从循环通过 PersonalityQuestions 表的 Rails 表单生成的。

<div id="carouselExampleControls" class="carousel slide" data-interval="false"   
         data-ride="carousel" data-pause="hover">
  <div class="carousel-inner">
      <div class="carousel-item text-center">
        <h2>I want to be seen as successful</h2>
      </div>
      <div class="carousel-item text-center">
        <h2>I don’t want to be seen as taking up too much space </h2>
      </div>
      <div class="carousel-item text-center">
        <h2>I want to be seen as authentic and special</h2>
      </div>

我想使用 javascript（遗憾的是没有 jQuery）将active类添加到我的<div classs="carousel-inner">的第一个孩子
结果应该是<div class="carousel-item text-center active">

我已经阅读了所有 Stackoverflow 帖子，但找不到答案。

这是我想出的最佳答案
document.getElementsByClassName('carouselinner').firstChild.classList.add('active');

但我收到一个错误：
Uncaught TypeError: Cannot read property 'classList' of undefined at <anonymous>:1:61

谁能告诉我我做错了什么？

Answer 1

您的尝试基本上有两个问题：

首先， getElementsByClassName()返回具有所有给定类名的所有子元素的类数组对象。 因此，您要从哪个索引中查找firstChild是不明确的。 您已提供特定索引。

其次，对于node.firstChild的问题（返回#text或#comment nodes ）

为了避免node.firstChild返回#text或#comment nodes 的问题， ParentNode.firstElementChild可用于仅返回第一个元素节点。 但是，对于 Internet Explorer 9 及更早版本， node.firstElementChild需要一个 shim。

所以你的代码应该是：

document.getElementsByClassName('carousel-inner')[0].firstElementChild.classList.add('active');

但是首选的方法是在querySelector()使用:first-child选择器和classList.add() ：

 document.querySelector('.carousel-inner :first-child').classList.add('active');

 .active {color: red}

 <div id="carouselExampleControls" class="carousel slide" data-interval="false" data-ride="carousel" data-pause="hover"> <div class="carousel-inner"> <div class="carousel-item text-center"> <h2>I want to be seen as successful</h2> </div> <div class="carousel-item text-center"> <h2>I don't want to be seen as taking up too much space </h2> </div> <div class="carousel-item text-center"> <h2>I want to be seen as authentic and special</h2> </div> </div> </div>