Как вызвать несколько элементов одного класса, используя getElementsByClassName?

Question

Это расстраивает.

В настоящее время я занимаюсь практикой, и я хотел бы добавить класс и удалить другой класс в div с классом "sap". У меня есть 3 div с одним и тем же классом, и я собираюсь использовать al oop, чтобы получить все элементы с одним и тем же классом, но, похоже, он не работает, и я не знаю почему.

Я используя только ваниль JS.

Кто-нибудь может мне помочь? Спасибо за любую оказанную помощь.

HTML:

<button onclick="boot()">show</button>
<div class=panel>
<div id="container" class="sap">
  <div class="content"><span>unveil</span></div>
<div class="smooth">
</div>
</div>
<div class="sap">
  <div class="content"><span>unveil</span></div>
<div class="smooth">
</div>
</div>
<div class="sap">
  <div class="content"><span>unveil</span></div>
<div class="smooth">
</div>
</div>
</div>

JS:

function boot(){
  for(var i=0;i<=3;i++){
      var box=document.getElementsByClassName("sap");
    if(box[i].classList.contains("content")){
       box[i].classList.add("flush");
       }}
  }

Answer 1

Обычно не очень хорошая идея использовать встроенные обработчики событий.

Вы можете использовать более современный document.querySelectorAll, распределить его результат (в виде массива) в Array и выполнить с ним требуемое действие. Или, еще короче, выберите все .sap > .content в одном go и выполните действие. Что-то вроде:

document.addEventListener("click", boot);

function boot(evt) {
  // --------------------------------------------------------------------------------    
  // just for this demo snippet
  [...document.querySelectorAll(".flush, .flushAlt")]
    .forEach(elem => 
      elem.classList.remove("flush","flushAlt"));
  // --------------------------------------------------------------------------------    
  if (evt.target.dataset.action === "boot") {
    [...document.querySelectorAll(".sap")] // all div.sap
      .forEach(elem =>
        [...elem.querySelectorAll(".content")] // all div.content *within* div.sap
          .forEach(content => 
            content.classList.add("flush")))
  } else if (evt.target.dataset.action === "bootAlt") {
    // all div.content *within* div.sap in one go
    [...document.querySelectorAll(".sap > .content")]
      .forEach(content => 
            content.classList.add("flushAlt"))
  }
}

.flush {
  color: red;
  background-color: yellow;
  width: 100px;
  margin: 4px;
  padding: 2px;
  text-align: center;
}

.flushAlt {
  color: white;
  background-color: brown;
  width: 100px;
  margin: 4px;
  padding: 2px;
  text-align: center;
}

<button data-action="boot">show</button>
<button data-action="bootAlt">show (alternative)</button>
<div class=panel>
  <div id="container" class="sap">
    <div class="content"><span>unveil</span></div>
    <div class="smooth">
    </div>
  </div>
  <div class="sap">
    <div class="content"><span>unveil</span></div>
    <div class="smooth">
    </div>
  </div>
  <div class="sap">
    <div class="content"><span>unveil</span></div>
    <div class="smooth">
    </div>
  </div>
</div>

Answer 2

Код, который вы указали, работает, за исключением того, что нет div с классами content и sap одновременно, поэтому при запуске приведенного ниже фрагмента вы не увидите никаких изменений (ни один класс не будет добавлен ни к одному элементу ):

function boot() {
  var box = document.getElementsByClassName("sap");
  for(var i=0; i < box.length; i++) {
    if(box[i].classList.contains("content")) {
       box[i].classList.add("flush");
    }
  }
}

.flush {
  font-weight: bold;
  color: #09f;
}

<button onclick="boot()">show</button>
<div class=panel>
  <div id="container" class="sap">
    <div class="content"><span>unveil</span></div>
    <div class="smooth"></div>
  </div>
  <div class="sap">
    <div class="content"><span>unveil</span></div>
    <div class="smooth"></div>
  </div>
  <div class="sap">
    <div class="content"><span>unveil</span></div>
  <div class="smooth">
  </div>
  </div>
</div>

Если вы хотите добавить класс к элементу класса sap, который имеет дочерний элемент с классом content:

function boot() {
  var box = document.getElementsByClassName("sap");
  for(var i=0; i < box.length; i++) {
    if(box[i].querySelector('.content') !== null) {
      box[i].classList.add("flush");
    }
  }
}

.flush {
  font-weight: bold;
  color: #09f;
}

<button onclick="boot()">show</button>
<div class=panel>
  <div id="container" class="sap">
    <div class="content"><span>unveil</span></div>
    <div class="smooth"></div>
  </div>
  <div class="sap">
    <div class="content"><span>unveil</span></div>
    <div class="smooth"></div>
  </div>
  <div class="sap">
    <div class="content"><span>unveil</span></div>
  <div class="smooth">
  </div>
  </div>
</div>

Answer 3

Возьми это var box=document.getElementsByClassName("sap"); за пределами l oop. Это даст коллекцию элементов html с этим классом sap. Затем вы захотите повторить эту коллекцию, поэтому вам не нужно жестко кодировать номер 3. Обратите внимание, что в вашем коде вы набрали <=3. Это будет <, но не <=. Поскольку <= индекс начинается с 0, поэтому <= также попытается сопоставить 4-й элемент, которого там нет.

Затем получите первого потомка div.sap, используя children

function boot() {
  var box = document.getElementsByClassName("sap");
  for (var i = 0; i < box.length; i++) {
    const firstChild = box[i].children[0]
    if (firstChild.classList.contains("content")) {
      firstChild.classList.add("flush");
    }
  }
}

.sap {
  border: 1px solid red;
}

.content {
  color: green;
}

.flush {
  font-size: 20px;
  color: blue;
}

<button onclick="boot()">show</button>
<div class=panel>
  <div id="container" class="sap">
    <div class="content"><span>unveil</span></div>
    <div class="smooth">
    </div>
  </div>
  <div class="sap">
    <div class="content"><span>unveil</span></div>
    <div class="smooth">
    </div>
  </div>
  <div class="sap">
    <div class="content"><span>unveil</span></div>
    <div class="smooth">
    </div>
  </div>
</div>