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.

Last updated