Skip to main content Accessibility Feedback

How to get the first and last focusable elements in the DOM

Heydon shared a neat JavaScript trick on Twitter the other week for getting all focusable elements in the DOM, and narrowing it down to the first or last element.

We can get all focusable elements using querySelectorAll() and a comma-separated list of elements to target. We want to look for buttons, links, form eleements, and anything with a tabindex that’s not -1.

var focusable = document.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"]');

This returns a node list from which we can grab the first or last element as needed.

var focusable = document.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not(tabindex="-1"]');
var firstFocusable = focusable[0];
var lastFocusable = focusable[focusable.length - 1];

Thanks Heydon!


🔥 Hot off the press! I just launched a new pocket guide. Learn how to build interactive web apps with vanilla JavaScript.

Have any questions or comments about this post? Email me at chris@gomakethings.com or contact me on Twitter at @ChrisFerdinandi.

Get Daily Developer Tips