Skip to main content Skip to secondary navigation Accessibility Feedback

Buoy: A tiny collection of helper methods for getting things done in native JavaScript

A few years ago, I stopped using jQuery and started writing exclusively in native JavaScript (aka vanilla JS).

There’s a handful of helper methods I end up using in every script I write, so I decided to bundle them into a helper library called Buoy.

Psst... I just launched a new guide to ditching jQuery for vanilla JS. Buy it today →

Why? #

I end up reusing the same methods over and over again in my JS plugins. If I’m using more than one of them on a projects, this let’s me keep my code more DRY and reduces my overall file size.

It also makes native JavaScript development more accessible for people coming from a jQuery background.

What’s included? #

  • buoy.forEachTodd Motto’s method for looping through arrays,
    nodelists, and objects.
  • buoy.extend – Merge two or more objects.
  • buoy.getHeight – For reliably getting the height of an element.
  • buoy.getOffsetTop – Get an element’s distance from the top of the Document.
  • buoy.getClosest – Get the closest matching element up the DOM tree. Match by class, ID, data attribute, or tag.
  • buoy.getParents – Get an element’s parent nodes. Optionally filter by class, ID, data attribute, or tag.
  • buoy.getSiblings – Get an element’s sibling nodes.
  • buoy.getQueryString – Get data from a URL’s query string.

How do I get it? #

Download Buoy on GitHub.

If you liked this article, you might also like Ditching jQuery, my new beginner's guide to vanilla JavaScript. Buy it today →
  • More articles on...
  • Code

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

Get the Weekly Digest