title: .getAttribute() method on elements returned by querySelectorAll()
body: <p>I'm trying to get the value of data attributes from multiple div elements. The elements are captured into a variable using </p>
  
  <blockquote>
    <p>querySelectorAll()</p>
  </blockquote>
  
  <p>I'm getting an error when I loop through the variable that contains the element and use the <strong>getAttribute()</strong> Method:</p>
  
  <pre><code>&lt;div id="container"&gt;
    &lt;div class="box" data-speed="2" id="one"&gt;&lt;/div&gt;
    &lt;div class="box" data-speed="3" id="two"&gt;&lt;/div&gt;
    &lt;div class="box" data-speed="4" id="three"&gt;&lt;/div&gt;
    &lt;div class="box" data-speed="5" id="four"&gt;&lt;/div&gt;
    &lt;div class="box" data-speed="6" id="five"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>js:</p>
  
  <pre><code>(function() {
  
  var boxes = document.getElementsByClassName("box");
  
  for (var i = 0; i &lt; boxes.length; i++) {
  
  var r = Math.floor((Math.random() * 254) + 1);
  
  boxes[i].style.background = "rgba(" + r + "," + i*30 + "," + i*45 + ", 1)";
  
  }
  })();
  
  var divArray = [];
  var divs = document.querySelectorAll(".box");
  
  for (i = 0; i &lt;= divs.length; i++) {
  
  console.log(divs[i]);
  
  var speed = parseInt(divs[i].getAttribute("data-speed"));
  
  };
  </code></pre>
  
  <p>Jsfiddle <a href="https://jsfiddle.net/kshatriiya/L8xsvzL1/1/" rel="nofollow noreferrer">https://jsfiddle.net/kshatriiya/L8xsvzL1/1/</a></p>
  
  <p>When I </p>
  
  <blockquote>
    <p>console.log(divs[i])</p>
  </blockquote>
  
  <p>it shows the element, I don't know why I'm unable to use the attribute method on it.</p>
  
  <p>Any pointer would be really appreciated!</p>