title: Using getElementById and getElementsByTagName together
body: <p>I have code that looks like so: </p>
  
  <pre><code>&lt;ul id="effects-list" class="effects-list"&gt;
      &lt;li data-creative="5"&gt;Creative&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>I am attempting to read the data attribute of that above HTML using the following code: </p>
  
  <pre><code>var effectData = document.getElementById("effects-list").getElementsByTagName("li");
  var creative = effectData.getAttribute('data-creative');
  alert(creative)
  </code></pre>
  
  <p>The above code doesn't work. It throws the following error: </p>
  
  <pre><code>effectData.getAttribute is not a function
  </code></pre>
  
  <p>I am using jQuery on the page and originally tried this: </p>
  
  <pre><code>var effectData = $('.effects-list li');
  </code></pre>
  
  <p>Again, same error. </p>
  
  <p>What do I have wrong and how do I fix this? </p>
  
  <p>Here is a <a href="http://jsfiddle.net/3DQ47/1/" rel="nofollow">jsFiddle</a> of the code. </p>
  
  <p>Note: There are more <code>li</code> elements on the page and I am reading more data than just one <code>li</code> element. I am trying to avoid having to ad a separate id to each <code>li</code> element if I can help it.</p>