title: getAttribute of elements with some class doesn't work
body: <p>I have some input fields with a specific class. They all have a data attribute, say <code>data-somedata</code> with an integer value. I have to calculate the sum of these data attributes. I tried to use <code>getAttribute</code> in combination with <code>getElementsByClassName</code>, but that doesn't work.</p>
  
  <p>I'm using this code:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;input class="datainput" value="The 1st input" type="text" data-somedata="8"/&gt;
  &lt;input class="datainput" value="The 2nd input" type="text" data-somedata="15"/&gt;
  &lt;div id="result"&gt;&lt;/div&gt;
  </code></pre>
  
  <pre class="lang-js prettyprint-override"><code>var fields = document.getElementsByClassName('datainput');
  var result = 0;
  for (var i in fields) {
      result += fields[i].getAttribute('data-somedata');
  }
  document.getElementById('result').innerHTML = 'The sum is: ' + result;
  </code></pre>
  
  <p><a href="http://jsfiddle.net/AnKDU/" rel="nofollow">See it live on jsFiddle</a></p>
  
  <p>In the (firefox) console, I get:</p>
  
  <blockquote>
    <p>TypeError: <code>fields[i].getAttribute</code> is not a function</p>
  </blockquote>
  
  <p>Why is this? And how can I fix it?</p>
  
  <p>I do <strong>not</strong> want to use jQuery unless absolutely necessary (I don't suppose it is).</p>