Совет по оптимизации кода взаимодействующего с DOM

Question

function addAuto() {
    let list = document.getElementById('autos');
    for (let i = 0; i < list.length; i++) {
        console.log(list[i]);
        break;
    }
}

window.addEventListener('click', addAuto);

<div class="listCars ">
  <label for="autos">
    <select class="node w-100" size="10" id="autos">
      <option>ГАЗ(САЗ)</option>
      <option>ГАЗель до 2002 года</option>
    </select>
  </label>
</div>

Имеется такой блок кода который по задумке должен получить все элементы из списка и вывести их в консоль. Подскажите, пожалуйста, данный код как то можно улучшить?

Answer 1

window.addEventListener('click', ()=>{
 document.querySelectorAll('#autos option').forEach(function(){
   console.log(this.innerText)
 })
});

UPD

Код, представленный выше не будет работать, так как в переменной List ,будет лежать одна нода. Метод querySelectorAll предоставляет итерируемый объект NodeList, у которого есть метод forEach, он нам и позволит вызвать callback функцию для каждого эллемента NodeList.

В самой же callback функции мы обращаемся к эллементу и достаем оттуда содержимое по свойству innerText и выводим его в консоль.

Важный момент в callback функции мы должны указать именно анонимную функцию, а не стрелочную, чтобы у нас корректно подтянулся this.

Как-то так)

Answer 2

function addAuto() {
  Array.from(document.getElementById('autos').children)
  .forEach(elem => console.log(elem.innerHTML))
}

document.getElementById('button-to-console')
.addEventListener('click', addAuto);

<div class="listCars ">
  <label for="autos">
    <select class="node w-100" size="10" id="autos">
      <option>ГАЗ(САЗ)</option>
      <option>ГАЗель до 2002 года</option>
    </select>
  </label>
</div>

<button type="button" id="button-to-console">To Console</button>

Выводит в консоль все элемены, а не только первый. Делает это по нажатию кнопки, а не по клику на страничке.

БЛОГ НА HUSL

Совет по оптимизации кода взаимодействующего с DOM

Ответы (2 шт):