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.

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

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

Last updated