Selector Lab

Compare ID, class, tag, and CSS selector methods against the same sample HTML.

Sample content

First paragraph with id title and class note.

Second plain paragraph with id subtitle.

Third paragraph with class note.

Inner card target

Sample HTML source

Compare this markup with the live sample above. Enter values that match an id, class, tag name, or CSS selector.

Try: title with getElementById

Try: note with getElementsByClassName

Try: p with getElementsByTagName

Try: .note or #title with querySelector / querySelectorAll

Try a selector

Value for the chosen method

Choose a method to inspect the sample.
Preview appears here.

Important JavaScript

Each method takes a different kind of value: plain name, tag name, or CSS selector.

document.getElementById("title");
document.getElementsByClassName("note");
document.getElementsByTagName("p");
document.querySelector(".card");
document.querySelectorAll(".note");