Element Selection

Old School

Selecting an element by id

document.getElementById('login');

This code will return the first element having the given id.

<input id="login">

Select using CSS class

document.getElementsByClassName('blog-post');

This code will return the first element having the blog-post-content CSS class.

<section class="blog-post-content"></section>

Select by HTML tag

document.getElementsByTagName('header')

This code will return the first element having the header HTML tag.

<header>This is the header.</header>

Modern Way

Select using query selector

document.querySelector('header');
document.querySelectorAll('div.blog-post-content');

The first call will return the first element with the header HTML tag.

The second call will return an iterable object with all the items with a div HTML tag and the blog-post-content CSS class.

This is the easier and most modern way of selecting elements.

querySelector and querySelectorAll methods are also available on every element in order to search for child elements.

const firstNameInput = form.querySelector('input[name="firstName"]');