Rewrite function from getElementById to getElementsByClassName or getElementsByTagName

Question

I'm using this code by RobG from this answer to fit text inside an dynamic width container by id. But ideally I would like to use it on several elements at the same time. How could I rewrite this to work with getElementsByClassName or getElementsByTagName?

<script>

function resize(el, factor) {

  // Get element width
  var width = el.offsetWidth;

  // set default for factor
  if (typeof factor == 'undefined') {
    factor = 5;
  }

  // Set fontsize to new size
  el.style.fontSize = (width / factor | 0) + 'px';
}

window.onload = function() {
  function doResize() {resize(document.getElementById('fit'), 6);}
  window.onresize = doResize;
  doResize();
}

</script>

<div id="fit">Some text</div>

Answer 1

Get the elements and call the function in an iteration

function resize(el, factor) {
  // Get element width
  var width = el.offsetWidth;

  // set default for factor
  if (typeof factor == 'undefined') {
    factor = 5;
  }

  // Set fontsize to new size
  el.style.fontSize = (width / factor | 0) + 'px';
}

window.onload = function() {
  function doResize() {
      /* get a nodelist */
      var elems = document.getElementsByClassName('myClass');

      /* iterate over nodelist */
      for (var i=elems.length; i--;) {
          resize(elems[i], 6); // call function for each element
      }
  }
  window.onresize = doResize;
  doResize();
}

You're better off using querySelectorAll('.myClass') than getElementsByClassName. It's supported in IE8, where getElementsByClassName isn't.