Get only visible element using pure javascript

Question

I have elements like below

<div class="one">send Message</div>

<div class="one">send Message</div>

<div class="one">send Message</div>

I have a web page where there is send Message buttons like above, in which only one button is visible at a time.Other two buttons are hidden via some javascript codes.So for example if 2nd button is visible , I should be able to get only that element.

So my code will be something like

document.querySelector(".one:visible");

In jquery the code is $(".one:visible"); , which works fine , But I need to know how to do this via pure javascript.

Answer 1

If you're using the hidden attribute :

document.querySelector(".one:not([hidden])");