loading...

Matching elements with selectors in JS

Sam Thorogood on June 13, 2019

Another short one! Let's talk about the two HTML helper methods, Element.matches and Element.closest. Both of these methods are supported in modern... [Read Full]
markdown guide
 

Good post!

And if you need to support IE11, the polyfill is very light. You can find examples on the MDN pages:

Or you can just use Babel.

 

Babel on its own is not a magic bullet—you need to include the right polyfill with it, since it's not a language feature. But your point is valid and the polyfills are easy.

IE11 is ~2%, for me on any modern content site, I just don't ship it any JS whatsoever. This is what we did for e.g. the Chrome Dev Summit site.

 

Yeah you need to include the Babel polyfill properly.

Haha, I'm jealous. Unfortunately the website I'm working on is B2B focused which has a significant number of enterprise users in IE11. Ah well.

 

Just a nitpick:
The following line:

el.classList.has('foo') /* becomes */ el.matches('.foo');

I think you mean 'contains' instead of 'has'

  • Uncaught TypeError: elem.classList.has is not a function
 

Oh yeah, I think I was thinking of Set or Map. I'll fix, thanks! 👍

 

I used closest to refactor some recursive code recently! It's a super cool method. I didn't know about matches though -- so thanks 😊

How are you finding daily code blogging?

 

Matches is probably less useful but is really a precursor to closest.

Daily blogging is going well but—having a newborn is complex, we've lots of medical appointments—so I've slipped a bit so I'm now making each post about ~2 hours before my artificially self-imposed deadline (midnight on the day, in Sydney time).

I have a remarkably large short list of topics that I'd like to blog about, so I'm not low on ideas. I just need to build up a buffer again 🤣

 
 
code of conduct - report abuse