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!

--

--

--

Software engineering student, string cheese enthusiast!

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Implement google captcha in ASP.Net MVC using ‘reCAPTCHA Nuget Package’

My First JavaScript Project

Container vs. Components in React Redux

Electron + React + Python (Part 3) — Boilerplate 1/3

My Life on the Edge

Build Your Own React-Redux Using useReducer and useContext Hooks

VizHub 1.0

Error handling with Async/Await in JS

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Yevgeniy Valdman

Yevgeniy Valdman

Software engineering student, string cheese enthusiast!

More from Medium

JavaScript Objects

JavaScript Iterations

The end of a toilet paper roll hanging near a toilet with the last paper sheet hanging from the cardboard roll with the words “Don’t Panic!”.

JavaScript Objects

Javascript ES6 Modules