JSFiddle - React, Tailwind, and code Playground

by dmethvin

HTML

<svg style="overflow-x: hidden; overflow-y: hidden; position: relative; " height="301" version="1.1" width="1280" xmlns="http://www.w3.org/2000/svg">
    <rect 
        x="10" 
        y="20"
        width="100"
        height="60"
        r="10"
        rx="10"            
        ry="10"
        fill="#ff0000"
        stroke="#ff0000"
        class="by-class"
        fill-opacity="0.1"
        stroke-width="2">
    </rect>

    <rect 
        x="10" 
        y="90"
        width="100"
        height="60"
        r="10"
        rx="10"            
        ry="10"
        fill="#0000ff"
        stroke="#0000ff"
        id="by-id"
        fill-opacity="0.1"
        stroke-width="2">
    </rect>
</svg>

JavaScript

$(document.body).on('click', '#by-id', function() {
    alert('delegated id selector');
});

$(document.body).on('click', '.by-class', function() {
    alert('delegated class selector');
});

function tellit(s,v){
    $("body").prepend("<p>"+s+"="+v+"</p>");
}

var c = ".by-class", d = document.documentElement, el = $(c)[0];

tellit("qSA", document.querySelectorAll(c).length);
tellit("gEBCN", document.getElementsByClassName(c.slice(1)).length);
tellit("$()", $(c).length);
tellit("el.className", c.className);
tellit("el['class']", c["class"]);
tellit("el.attributes['class']", el.attributes['class']);
tellit("el.attributes['class'].value", el.attributes['class'].value);

var mS = d.matchesSelector || d.webkitMatchesSelector || d.mozMatchesSelector || d.msMatchesSelector || d.oMatchesSelector;
if ( mS ) tellit("mS", mS.call(el,c));