Selecting HTML Elements in Javascript

If you’re just starting out, Javascript can be a scary “ocean” to swim in. But once you dive in, you’ll quickly realize the water is warmer than you think. My experience with Javascript has been a rollercoaster of emotions. From “I don’t understand what’s going on”, to “ahh I get it now”, then “how am I ever going to make the best decision?” There are many ways of saying the same thing and achieving the same result. With such a vast expanse of options, choosing the right path can easily become a day filled with anxiety and frustration.

Don’t fret just yet, solve all your problems with a ‘let’ (or ‘const’).

I am here to tell you that there is hope on the horizon. No matter the chosen route, good logic can yield the desired result.

HTML and CSS can only do so much for a webpage. The two alone are limited to very static pages and you’ll need some serious help if you want to make your pages come alive. That help is Javascript! It’s is an amazing tool designed to take your boring page and make it dynamic and interactive. One of the first steps in expanding your HTML document is selecting specific elements you want to “upgrade”. We will explore the top 5 ways of selecting an element.

This “selection” can be done in many different ways:

• we can get elements by id:

- look through the document and find all elements with the id of ‘list-group-item’

• we can get elements by class name:

- look through the document and find all elements with the class of ‘list-group’

• we can get elements by tag name:

- look through the document and find all elements the tag name of ‘li’

• we can also get any of the above elements by query selector:

* querySelector will only select the first element it finds that fits the criteria *

with querySelector we can replace any of the other methods for ‘getting’ an element. The ‘#’ represents id, ‘ . ’ represents class and nothing in front will represent the tag. The most important thing to remember is that querySelector will only grab the first element it finds as its searching through the document.

• if you want to select multiple ‘li’ tags, for example, you can querySelectorAll:

- will select every ‘li’ tag in your HTML document

Once your desired element is selected, the possibilities are virtually endless. If you can imagine it, it can probably be done in Javascript.

Some of the the things you can do include:

• creating new elements that can be appended (inserted) inside these elements
• changing the inner text of the elements
• listening for ‘events’ on the elements. Events can be a click, submit, hover, or any other form of user action that can be done on a page.
• forms can be built inside the elements
• classes or ids can be added or changed on the element

Javascript can be your best friend or one of your worst enemies. Embrace the freedom of writing code on your own terms. Embrace the weird quirks that come with having such freedom. It’s fun and strange and stands out on it’s own, it’s impolite and sneaky and does not always tell you why it’s mad, it’s loving and forgiving and does whatever you want, it’s JAVASCRIPT and it will be the best love/hate relationship of your life!