{"id":18695,"date":"2020-06-30T11:10:01","date_gmt":"2020-06-30T18:10:01","guid":{"rendered":"https:\/\/careerkarma.com\/blog\/?p=18695"},"modified":"2023-12-01T03:36:48","modified_gmt":"2023-12-01T11:36:48","slug":"queryselector-javascript","status":"publish","type":"post","link":"https:\/\/careerkarma.com\/blog\/queryselector-javascript\/","title":{"rendered":"querySelector JavaScript: A Guide"},"content":{"rendered":"\n

getElementById<\/code>. getElementByClass<\/code>. You may have heard about these functions before. They both allow you to select a particular element in JavaScript.
<\/p>\n\n\n\n

Once you\u2019ve selected an element you can change its contents, modify its state, or even make it disappear.
<\/p>\n\n\n\n

There\u2019s another function you can use to select an item on a webpage in JavaScript: querySelector<\/code>. This function has a sister called querySelectorAll<\/code>, which returns all of the elements that meet a particular query.
<\/p>\n\n\n\n

In this guide, we\u2019re going to discuss how to use the querySelector<\/code> and querySelectorAll<\/code> methods. We\u2019ll walk through an example of these methods in action so that you\u2019ll be ready to use them in your code.<\/p>\n\n\n\n

What Is querySelector?<\/h2>\n\n\n\n

querySelector<\/code> is a function that returns an element that matches a CSS query. Note the querySelector<\/code> method only returns the first instance of a selector. When using querySelector<\/code>, you can specify any CSS selector that you want. For instance, you could retrieve an element which has a specific ID set, or an element by its tag name.
<\/p>\n\n\n\n

You can use this function like this:
<\/p>\n\n\n\n

var elementName = document.querySelector('#thisElement');<\/pre><\/div>\n\n\n\n
We\u2019ve specified the CSS selectors to match in quotation marks. In addition, you can use the method to select an element within another element:
<\/p>\n\n\n\n
var parentElement = document.querySelector('main');\nvar childElement = document.querySelector('#childElement');<\/pre><\/div>\n\n\n\n
This will return the element with the ID #childElement which is contained within the <main> tag in our HTML file. 
<\/p>\n\n\n\n
The querySelectorAll<\/code> method works in the same way. The difference is that it returns all the matches found by the query selector, rather than just the first one:<\/p>\n\n\n\n
var allParagraphs = document.querySelectorAll('p');<\/pre><\/div>\n\n\n\n
This will return a list of all the <p> tags on an HTML page.
<\/p>\n\n\n\n
Here are a few examples of selectors you could use with this function:
<\/p>\n\n\n\n