05/11/2015

Trigger click event on elements - Native JavaScript and JQuery

Maybe I'm a Sysops guy, and don't use JavaScript on a daily basis, but JS became a mandatory language and got an elastic eco-system, so as a power user you may need it from time to time to do some fancy things :D

And one of those things is select or click on some elements in the webpage, for example multiple choice or expand list or so (e.g. some websites don't have expand all option). In fact, I learned basics of JS just to do things like that :D

Recently, with some help of a developer colleague, this was the final result with JQuery and native JS. JQuery has a function to do this, but if the website doesn't have use JQuery (which is rare nowadays) I use the native one.

I tested it on Firefox only, and all of this should be run in web browser console (Shift+Ctrl+K in Firefox Linux), and ".expand" is name of the element class we want to click it.

JQuery:
  $(".expand").click()
Native JavaScript:
var es = document.querySelectorAll('.expand')

for(var i=0; i < es.length; i++) {
  es[i].click()
}

I know it's not a big deal, but I frequently used it, so I think it's a good idea to post it.
Powered by Blogger.

Hello, my name is Ahmed AbouZaid, I'm a passionate Tech Lead DevOps Engineer. 👋

With 16+ years of open-source contributions, 12+ years of professional hands-on experience in DevOps, and an M.Sc. in Data Engineering from Edinburgh Napier University (UK), I enjoy facilitating the growth of both businesses and individuals.

I specialize in Cloud-Native and Kubernetes. I'm also a Free/Open source geek and book author. My favorite topics are DevOps transformation, automation, data, and metrics.

Contact Me

Name

Email *

Message *

Start Your DevOps Engineer Journey!

Start Your DevOps Engineer Journey!
Start your DevOps career for free the Agile way in 2024 with the Dynamic DevOps Roadmap ⭐

Latest Post

2023 Highlights

Image generated with Craiyon . Finally, 2023 is over! What a year! One more crazy year, but it was the culmination ...

Popular Posts

Blog Archive