Почему получаю ошибку?

Question

[Анатолий]

Пример добавляет класс.

let cur = document.getElementsByClassName('aaa');
for(let i in cur){
  let node = cur[i];
  while(node.tagName != 'NAV'){
    if(node.classList.contains('bbb')) { node.classList.add('test'); }
    node = node.parentNode;
  }
}

html

<nav>
  <ul>
    <li>1</li>
    <li>2</li>
    <li class='bbb'>3
      <ul>
        <li>3.1</li>
        <li class='aaa'>3.2</li>
      </ul>
    </li>
  </ul>
</nav>

Вопрос: почему в консоли получаю ошибку:
"TypeError: Cannot read property 'contains' of undefined"
если за комментировать строку:

if(node.classList.contains('bbb')) { node.classList.add('test'); }

получаю ошибку:
"TypeError: Cannot read property 'tagName' of undefined"
как решить?

Answer 1

[Ivan Bogachev]

Потому, что for...in перебирает не совсем то, что вы ожидаете. В вашем случае будет удобнее использовать какой-нибудь другой вариант цикла - тот же for...of к примеру.

Answer 2

[Andrew]

let cur = document.getElementsByClassName('aaa');
Вы получаете html коллекцию, к которой "нельзя" применять методы, как для массивов
Юзайте querySelectorAll и живите счастливо или играйтесь с .call
let cur = document.querySelectorAll('.aaa');
Пример с forEach

Comments

[Анатолий]

А можно на пальцах объяснить?
Коллекцию можно получить через getElementsByClassName или querySelectorAll, она прекрасно "собирается" и выводится в консоли при надобности.
Но это не решает проблемы с undefined.

[Анатолий]

let cur = document.querySelectorAll('.aaa');
for(let i in cur){
  let node = cur[i];
  while(node.tagName != 'NAV'){
    if(node.classList.contains('bbb')) { node.classList.add('test'); }
    node = node.parentNode;
  }
}

[Шохрух Шаймардонов]

Анатолий, дело в том, что getElem.... Возвращает коллекцию тэгов, несмотря на то, что в консоли они выводятся как массив, методы массива там не работает. Можете превратить коллекцию в массив (например Array.from(htmlCollection)) и потом применять методы