JSFiddle - React, Tailwind, and code Playground

by jfriend00

HTML

<div id="first" class="events"></div>
<div id="second" class="events"></div>
<div id="third" class="events"></div>

JavaScript

function log(args) {
    var str = "";
    for (var i = 0; i < arguments.length; i++) {
        if (typeof arguments[i] === "object") {
            str += JSON.stringify(arguments[i]);
        } else {
            str += arguments[i];
        }
    }
    var div = document.createElement("div");
    div.innerHTML = str;
    document.body.appendChild(div);
}

try {
  var list = document.getElementsByClassName("events");

  for (var item of list) {
     log(item.id);
  }
  log("for/of with document.getElementsByClassName() (HTMLCollection) works")
} catch(e) {
	log("for/of with document.getElementsByClassName (HTMLCollection) does not work - throws exception")
}

try {
  var list = document.querySelectorAll(".events");

  for (var item of list) {
     log(item.id);
  }
  log("for/of with document.querySelectorAll() (nodeList) works")
} catch(e) {
	log("for/of with document.querySelectorAll (nodeList) does not work - throws exception")
}