Categories
JavaScript Selecting

JavaScript for optimizers #26: How to select an element type?

Example

Select an element type:

let getParagraph = document.querySelector("p"); 
console.log(getParagraph);

Try it out for yourself by going to the testing page and running the code in the browser console.

Tip: Press Command+Option+J (Mac) or Control+Shift+J (Windows, Linux, Chrome OS) to open the chrome console.

The first paragraph on the page gets selected

Breakdown

You can select every element type with this method by simply changing the selector.

Let’s look at a different element.

<h1>I'm a title!</h1>

We can select this title element with the document query selector method.

let getHeader1 = document.querySelector("h1"); 

Between the parentheses, we match the HTML element. We give the variable a name that describes the element we are selecting. The element gets assigned to this variable.

You can consonle.log this variable to verify that you have selected the right element.

console.log(getHeader1);

Syntax

 document.querySelector("elementtype");