javascript ошибка Uncaught TypeError: Cannot set property 'color' of undefined, что такое Object.keys, Array.prototype.slice.call

Рассмотрим пример кода, список li, мы хотим взять весь список и перебрать его.

КОгда мы перебираем элементы DOM, то помимо типов элемент в массиво подобных объектах получаемых с помощью querySelectorAll нам могут попасться и методы:

    <ul>
      <li>A</li>
      <li>B</li>
      <li>C</li>
      <li>D</li>
      <li>E</li>
   </ul>
   <script>{console.clear();
   	 const lis = document.querySelectorAll('li');
     for (let li in lis) {
       try{
          console.log(lis[li]); lis[li].style.color = 'red';      
       } catch(e){
          console.log(e);
       }
     }
   }</script>

Если мы посмотрим в консоль, то увидим ошибку Uncaught TypeError: Cannot set property 'color' of undefined

Это потому что querySelectorAll возвратит нам помимо li (это массиво-подобный объект) еще внутреннюю функцию item, к которой невозможно подцепить стиль или цвет, поэтому в данном месте и появляется такая ошибка. Чтобы этого избежать можно использовать Object.keys который отсечет лишнее:

   	 const lis = document.querySelectorAll('li');
     for (let li in Object.keys(lis)) {
       try{
          console.log(lis[li]); lis[li].style.color = 'red';      
       } catch(e){
          console.log(e);
       }
     }

Или самый правильный способ это привести массиво-подобный объект (мпо) к настоящему массиву с помощью метода slice:

   	 const lis = document.querySelectorAll('li');
     for (let li in Array.prototype.slice.call(lis)) {
       try{
          console.log(lis[li]); lis[li].style.color = 'red';      
       } catch(e){
          console.log(e);
       }
     }