querySelector is pretty versatile! It can select elements by classes, IDs, attributes, and even more complex CSS selectors. Here are some quick examples:
- By ID:
document.querySelector('#myId') - By Class:
document.querySelector('.myClass') - By Tag:
document.querySelector('p') - More complex selectors:
document.querySelector('div > p.myClass')
Keep in mind that querySelector returns the first element that matches the given selector. If you want to get all elements that match a selector, you can use querySelectorAll, which returns a NodeList.
For example:
// Returns the first element with the class 'myClass'
const singleElement = document.querySelector('.myClass');
// Returns a NodeList containing all elements with the class 'myClass'
const allElements = document.querySelectorAll('.myClass');So, yeah, querySelector and querySelectorAll are pretty handy tools in your JavaScript toolbox.
