Before you can change anything on a page with JavaScript, you have to be able to find the thing you want to change. DOM selection is the process of asking the browser's document object for a reference to one or more elements in the page's node tree. Once you hold that reference in a variable, it becomes your handle for reading content, changing styles, attaching events, or removing the element entirely.
In this topic you will work with the core vanilla JavaScript selection methods: getElementById for a single element with a unique id, querySelector for the first element matching any CSS selector, and querySelectorAll for a static list of all matching elements. You will also practice scoped selection, which means calling querySelector or querySelectorAll on an element reference instead of on document so the search is limited to that element's descendants. This is how you avoid accidentally grabbing the wrong card, row, or button on a page with repeated markup.
As you watch, pay attention to three things. First, the return value of each method: a single element, null when nothing matches, or a NodeList that may be empty. Second, the CSS selector syntax being passed in, since querySelector accepts the same selectors you already write in stylesheets. Third, how the presenter checks the result in the console before using it, because reading and verifying your selection is what prevents the null-reference errors that break scripts further down the file.
A long-form tutorial from the Sigma Web Development Course that walks through selecting elements by id, by class, and by other criteria using the standard document methods. Based on its title and length, it should compare the older getElementsBy-style methods with the modern querySelector and querySelectorAll approach and demonstrate each one live in the browser. Expect hands-on coding in an editor with results inspected in the developer console.
CodeWithHarry is a widely followed web development channel, and this single video covers nearly every subtopic in one place, which makes it a good primary walkthrough before you practice on your own markup.
A short, focused lesson on using CSS query syntax with document.querySelector and document.querySelectorAll to target page elements. The description indicates it demonstrates both methods, so you should see how a single selector string can match one element or a collection of them. At just over four minutes it is a concentrated look at the two most flexible selection methods.
It isolates querySelector and querySelectorAll, which are the two methods you will use most often, and its brevity makes it an efficient review or refresher after the longer tutorial.
Part of the Basic JavaScript Fast series, this video introduces getElementById as the way to retrieve a single element node from the DOM tree using its id attribute. The description notes that it continues past the selection step to show what you can do with the element once you have obtained it. Expect a step-by-step, beginner-paced explanation with simple example markup.
It gives getElementById dedicated attention and reinforces the idea that a selection returns a node reference you then work with, which directly supports the reading and verifying selection results subtopic.
These three videos work together to support MO3, the outcome that asks you to apply getElementById, querySelector, and querySelectorAll and verify your results. The CodeWithHarry tutorial provides broad coverage of selection by id, class, and CSS selector; the Code with Bibek clip concentrates on the two querySelector methods and the CSS selector syntax they accept; and the Begin Coding Fast video slows down on getElementById and on using the returned node. Because every selection returns an element, a NodeList, or null, the console checks demonstrated in these videos also prepare you for the manipulation work in MO4 and MO5, where a bad reference would cause your later code to fail.
These videos were chosen from YouTube on October 3, 2026. Each has captions; the player turns them on. Videos on YouTube can be changed or removed — if one no longer plays, tell your instructor. If a player does not appear, use its Watch on YouTube link.