Updated March 17, 2023
What is jQuery querySelector?
jQuery querySelector is used for selecting a specific document object model (DOM) element from the HTML document, using the HTML elements like name, id, attribute, type, attribute values, class, etc. This selection activity is performed with the help of the query querySelector() method, which is used to fetch the return value as the first value identified in the CSS selector document. This function is for performing multiple operations and is known amongst the programmers for it’s the faster processing time, smaller & plain javascript code, and easier to code as well.
Introduction to querySelector
The querySelector() method only returns the first element that matches a specified CSS selector(s) in the document. If an ID in the document is used more than once then it will return the first matching element.
Syntax of querySelector
Below is the syntax of querySelector:
querySelector(CSS selectors)- It returns the first element that matches the specified selectors.
- To return all the elements which match then we use the querySelectorAll() method.
- The CSS selectors which we pass should be of string type.
- It is mandatory to pass the CSS selectors.
- The string which we are passing must be a valid CSS selector.
- If the passed string is invalid then an SYNTAX_ERRexception is thrown.
- If no match is found it will return null.
- The matching of the first element is done using a depth-first pre-order traversal of the document.
- Specifies one or more CSS selector to match the element.
- For multiple selectors, separate with a comma.
- Characters that are not part of standard CSS syntax must be escaped using a backslash character.
Examples for querySelector() Method
Below are the examples for querySelector() methods:
In jQuery, you can select elements in a page using many various properties of the element they are Type, Class, ID, Possession of Attribute, Attribute Values, etc. Below is the example of Jquery by using type.
Example #1 – Selecting by type
1. The following query selector contains two <a>
Explanation of the above code: In this example, we can observe that we have used two anchor tags and inside the anchor tag we have passed the hyperlink of two images. By using the querySelector(“a”).style.backgroundColor = “red”; we have passed the anchor tag (“a”) to the querySelector. In the querySelector() method if we pass the multiple selectors it will return the first element that matches the specified selectors. Though it contains two anchor tags the first anchor tag which is found, applied its style.backgroundColor = “red”; to only for first anchor tag.
Output 1: Before clicking on the button (“Click me”).
Output 2: After clicking on the button (“Click me”) the background color of flower changes to “red”.
Output 3: On clicking on the hyperlinks, the respective images will be opened.
2. This querySelector also contains two <a> But in the below example I have changed the sequence of the picture. I have kept the desert hyperlink first then hyperlink of the flower second.
Explanation of the above code: In this example also we can observe that we have used two anchor tags and inside the anchor tag we have passed the hyperlink of two images. By using the querySelector(“a”).style.backgroundColor = “red”; we have passed the anchor tag (“a”) to the query selector. This time in the querySelector() it will find out the “Desert” hyperlink first as we changed the sequence. Though it contains two anchor tags the first anchor tag which is found, applied its style.backgroundColor = “red”; to only for first anchor tag.
Output 1: In the output, we can observe that the first image is Desert. So because of the querySelector() method, the Desert background color changed to red.
Output 2: On clicking on the hyperlink the desert image will be opened.
Output 3: On clicking on the hyperlink of the flower, the flower image will be opened.
Example #2 – Selecting by class
In this below example we are selecting by using the class name.
Explanation of the above code: In the above example, we are using the class name and here the class name is Selector. The same class name is passed for both h2 (heading tag) and the paragraph tag. For the querySelector() method we are passing the class name it will check for the particular class name in the program. Now it has found those tags which are having the same class name as mentioned. By using the depth-first pre-order traversal of the document the matching of the first element is done. The first element in the example which contains the class name as Selector is h2 (heading tag). The querySelector() method fetches the h2 tag and by style.backgroundColor it applies the particular background color to the h2 tag.
Output 1: Before clicking on the button (“click me”) the h2 tag content doesn’t change the background color to blue.
Output 2: After clicking on the button (“click me”) the h2 tag content changes its background color to blue.
Example #3 – Selecting by ID
In this below example we are selecting by using id.
Explanation of the above code: In the example, we are selecting by using id the id here is Selector. For the querySelector() method we are passing the id it will check for the particular id name in the program. Now it has found the tag which is having the same id name as mentioned. By using the depth-first pre-order traversal of the document the matching of the first element is done. The element in the example which contains the id name as Selector is paragraph tag. The querySelector() method fetches the paragraph tag and applies the particular changes to the content according to the code mentioned.
Output 1: Before clicking on the button “click me” the paragraph tag content will be “This is a p element with id =” selector”.
Output 2: After clicking on the button “click me” the paragraph tag content will be changed to “Change in the text”.
Uses of jQuery querySelector
Below are the two points explain the uses of querySelector:
- The codes of jQuery are more precise, shorter and simpler than the standard JavaScript codes. It can perform a variety of functions.
- The call to querySelector() returns the first element as it is picking one, so it is faster and also shorter to write.
Recommended Articles
This is a guide to jQuery querySelector. Here we discuss what is jQuery querySelector, introduction to querySelector, syntax and the example of Jquery by using type. You can also go through our other related articles to learn more –
