Pure JS jQuery .is()

Match an element against a selector, another element or a collection of elements.

by Emanuele del Grande

HTML

<div class="logo">
    <span>JS</span> <span>ElementsMatch</span>
    <div>Native JS extension to match elements</div>
</div>

<p>
Matching an element against a selector, another element or a collection of elements
</p>
<div>
The solution is implemented at the <code>Element.prototype</code> level, available on all the major browsers, supported even in IE, since the 8.x version.<br />
Usage is:
<pre>
var elem = document.getElementById('hello');
elem.is('div');
elem.is('.banner');
elem.is('#mainButton');
elem.is(document.getElementsByTagName('span'));
</pre>

Elements to match (check the console for the output):
</div>
<div id="a">div #a</div>
<div id="b">div #b</div>
<div id="c">div #c</div>
<div id="d">div #d</div>

CSS

@import url(https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap);

:root {
  --font-color: #444;
  --font-family: Inter, Roboto, Arial, Helvetica;
  --font-size: 14px;
  --font-weight: 300;
  --letter-spacing: -0.5px;
  --main-color: #607f8b; /* #4ae */
  --inner-border-width: 1px;
  --border-color: #ddd;
  --v-padding: 10px;
}


/* GENERIC STYLE */
*, *:before, *:after { margin; 0; padding: 0; box-sizing: border-box; outline: none; }
html, body {
    font: 14px var(--font-family); color: var(--font-color); line-height: 1.4em;
    font-weight: var(--font-weight); letter-spacing: var(--letter-spacing);
}
.logo { font: 42px var(--font-family); margin: 0; padding: 10px 0 0 20px; font-weight: 800; letter-spacing: -3px; white-space: nowrap; }
.logo span:first-child {
    position: relative; top: 0; left: 0; padding: 0 13px 0 10px; color: var(--main-color); background: var(--main-color); color: #fff;
    clip-path: ellipse(100% 125% at 100% 50%); z-index: 1;
}
.logo span:nth-child(2) { position: relative;top: 0; left: 0; margin: 0 0 0 -13px; background: transparent; z-index: 2; }

.logo div { font: 12px var(--font-family); padding: 0 0 0 70px; letter-spacing: -0.5px; }


/* SPECIFIC STYLES */
pre { background: #eee; margin: 10px 0; padding: 10px; font-family: monospace; }

JavaScript

Element.prototype.is = function(match) {
  // match is string selector or an element or an array or elements
  if (match.nodeType) {
    return this === match;
  }

  var qa = (typeof(match) === 'string' ? document.querySelectorAll(match) : match),
      length = qa.length,
      returnArr = [];

  while (length--) {
    if (qa[length] === this) {
      return true;
    }
  }
  return false;
}

var a = document.getElementById('a'),
    b = document.getElementById('b'),
    c = document.getElementById('c'),
    d = document.getElementById('d');

console.log(b.is(b)); //true
console.log(b.is(d)); //false
console.log(b.is([c, d, b])); //true
console.log(b.is('#b')); //true
console.log(b.is('.b')); //false
console.log(b.is(document.querySelectorAll('div'))); //true
console.log(b.is('div')); //true