Effective Plain Javascript Selector
In plain javascript we used to select an element like this:
document.getElementById("someElement")above is for the id
document.getElementsByClassName("someElement")above is for the class
But don't you know we can select elements effectively like this?
document.querySelector("#someElement")above for the id
document.querySelector(".someElement")above for the class
Now our JS code is more flexible than traditional javascript selector
Just by using document.querySelector()
Written by Widy Graycloud
Related protips
3 Responses
What if there is more than one element with same class? You'd have to use querySelectorAll, and loop, just like getElementsByClassName. For id's I don't think it's even worth using querySelector, no real gains there, id's are unique. A better example where querySelectorAll is really useful, querying selectors:
var els = document.querySelectorAll('ul > li a');
And my test http://jsperf.com/byclassname-vs-queryselectorall
While, surprisingly, querySelector(All) has better support, byId & byClassName are so much faster that I'd try and use them where possible
Have a fresh tip? Share with Coderwall community!
JavaScript on a page runs with the privileges of that origin. One altered library, tag manager, or snippet can read inputs, change what people see, and call your APIs as the user.
Security insights from Cside