How to Manipulate Your DOM to Find ‘The One’

Photo of a single rose laid upon a keyboard by Hello I'm Nik 🎞 on Unsplash

People will spend their whole lives searching for The One. According to Kelly Clarkson’s hit song, “A Moment Like This” some people wait a lifetime!

But what if I told you there was an easier way to find the one you’re looking for? In fact, there are many different ways. By navigating the DOM with different search methods, we can get access to exactly what we want.

querySelector

To find your one and only element, you’d be damned if you didn’t try querySelector first. Throw that sucker onto a specific element or on the entire document element like so document.querySelector(".one-true-love")

querySelector is searching for a provided CSS selector. The CSS selector in question is a class, hence the . at the beginning of our query term. The querySelector above will return the first element that meets your criteria ".one-true-love" but only the first one, the rest are out of luck. If they liked it then they should’ve put a ring on it. 🤷‍♂

querySelectorAll

If you’re a feeling a little polyamorous, take a gander at querySelectorAll which will return all the elements matching your query. If your heart desires to find all of your one-true-loves you could simply search for them using document.querySelectorAll(“.one-true-love”)

The above will return all of the elements that match the given selector. Hey, to each their own!

Photo by Dayne Topkin on Unsplash

getElementById

Another great strategy we can implement to find what we’re yearning for is document.getElementById('am-i-the-one') this will allow us to grab the element that matches the id am-i-the-one regardless of where it lives in the document. Who said long distance doesn’t work?

The caveat here is that there can only be one element with the id of am-i-the-one otherwise getElementById will not be able to find the one for you; try Tinder.

getElementById can only be called on document, not on another element. I’m so sorry to disappoint.

getElementsByName

Call me by your name… or by the element’s name at least. Calling document.getElementsByName("love-me") will return all the elements with the name "love-me" as an HTML Collection. A collection will be returned even if there is only one element with that name.

There are plenty of fish in the sea, make sure you pick the right one by putting the index of the element you want in a bracket notation.

Gif of Doggo to Keep Readers Engaged

getElementsByTagName

This here getElementsByTagName will return a collection of all the tags that meet the search criteria. If you were looking for anchor tags on your document (or a specific element,) you could do so by calling document.getElementsByTagName('a')

Keep in mind that this also returns an HTML Collection of elements regardless of if there is only one element being returned.

Tag you’re it… corny, I know.

getElementsByClassName

At this point, I hope you know what getElementByClassName would return, but if you don’t, fret not for I will tell you. If you were looking for a class by the name of "i-do" you could call document.getElementByClassName(‘i-do’) which will return all the elements with the class name of "i-do" in an HTML Collection.

You can call this on a specific element to search through children elements or you can cast a wider net and call it right on document. The choice is yours, never settle for less than you deserve.

Try it out!

If you’d like to test some of these element selectors, try them out in this handy dandy Repl below. Always try before you buy. 😉

I hope this helps you find the right element for you, whichever it may be. Thanks for reading!