JSFiddle - React, Tailwind, and code Playground

by Juri Rudi

HTML

<b>ID:</b>
<p id="myId">1A) getElementById</p>
<div id="myId2">1B) querySelector("#id")</div>
<br><b>CLASS:</b><br>
<p class="myClass2">5) querySelector(".class")</p>
<br><b>TAG:</b><br>
<span>2A) getElementByTagName</span>
<section>2B) querySelector("[tag]")</section>
<!--
<div class="myClass">2) getElementByClassName</div>



->>

JavaScript

//byId
document.getElementById("myId").addEventListener("click", function() { alert("ok"); });
// byCssSelector - ID
document.querySelector("#myId2").addEventListener("click", function() { alert("ok"); });

//byCssSelector - CLASS
document.querySelector(".myClass2").addEventListener("click", function() { alert("ok"); });

// byCssSelector - TAG
document.querySelector("section").addEventListener("click", function() { alert("ok"); });
/*
//byClass
document.getElementByClassName("myClass").addEventListener("click", function() { alert("ok"); });

//byTag
document.getElementByTagName("div").addEventListener("click", function() { alert("ok"); });

*/