Skip to content

Instantly share code, notes, and snippets.

@louisremi
Forked from 140bytes/LICENSE.txt
Created June 1, 2012 11:50
Show Gist options
  • Star 5 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save louisremi/2851541 to your computer and use it in GitHub Desktop.
Save louisremi/2851541 to your computer and use it in GitHub Desktop.
matches, check if an element matches a CSS selector | IE8 compatible
// check if an elem matches a CSS selector
function( elem, selector ) {
// We'll use querySelectorAll to find all element matching the selector,
// then check if the given element is included in that list.
// Executing the query on the parentNode reduces the resulting nodeList,
// document doesn't have a parentNode, though.
var nodeList = ( elem.parentNode || document ).querySelectorAll( selector ) || [],
i = nodeList.length;
// loop on the nodeList
while ( i-- ) {
if ( nodeList[i] == elem ) { return true; }
}
return false;
}
// Performances of native .matchesSelector are only 3 to 6 times faster,
// according to these tests: http://jsperf.com/matchesselector-vs-qsa-indexof
// but it requires a lot more code to detect the appropriate vendor prefix.
// Likewise, using .indexOf instead of a loop is only 5% faster, so it's not worth it.
function(a,d){for(var b=(a.parentNode||document).querySelectorAll(d)||[],c=0;d=b[c++];)if(d==a)return!0;return!1}
DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
Version 2, December 2004
Copyright (C) 2012 Louis-Remi <http://louisremi.com>
Everyone is permitted to copy and distribute verbatim or modified
copies of this license document, and changing it is allowed as long
as the name is changed.
DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION
0. You just DO WHAT THE FUCK YOU WANT TO.
{
"name": "matches",
"description": "Check if an element matches a CSS selector | IE8 compatible",
"keywords": [
"matches",
"selector"
]
}
<!DOCTYPE html>
<title>matches tests</title>
<div>Expected value: <b>true</b></div>
<div>Actual value: <b id="ret1"></b></div>
<div>Expected value: <b>false</b></div>
<div>Actual value: <b id="ret2"></b></div>
<script>
var matches = function(a,d){for(var b=(a.parentNode||document).querySelectorAll(d)||[],c=0;d=b[c++];)if(d==a)return!0;return!1}
var ret1 = document.getElementById( "ret1" ),
ret2 = document.getElementById( "ret2" );
ret1.innerHTML = matches( ret1, "div > b" );
ret2.innerHTML = matches( ret2, "li.active" );
</script>
@sindresorhus
Copy link

Even smaller:

function(a,d){for(var b=(a.parentNode||document).querySelectorAll(d)||[],c=0;d=b[c++];)if(d==a)return!0;return!1}

document.documentElement doesn't have a parentNode

It does in Chrome and Firefox, doing document.documentElement.parentNode returns the document.

@louisremi
Copy link
Author

Thanks @sindresorhus, it's document that has no parentNode, not document.documentElement

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment