How to select element with many tags using Javascript querySelectorAll-CodePudding

I'm trying to select the element below using Javascript querySelectorAll():

<button aria-label="Show more replies" data-open-web- type="button" >1 reply</button>

I'm new to Javascript, but searching around, I figured solution should be:

document.querySelectorAll('button.Show more replies.conversation-message-show-replies.Button__button--11-3-6.Button__action--11-3-6 Button__isEllipsis--11-3-6.spcv_showMoreRepliesText');

Unfortunately, I'm not getting a result set. So either my syntax is wrong, or there's something I'm not understanding.

Can someone show me how to select the above element, so I can compare against my answer and learn my mistake? Thanks

CodePudding user response：

You don't need to select every aspect of this button. I think just the class(es) would be enough. Also, since you're selecting just one element, I think document.querySelector is more suitable.

document.querySelector('button.Button__button--11-3-6.Button__action--11-3-6.Button__isEllipsis--11-3-6.spcv_showMoreRepliesText').style.color='red';

<button aria-label="Show more replies" data-open-web- type="button" >1 reply</button>

CodePudding user response：

querySelector() -- Selects 1 element docs
querySelectorAll() -- Selects a NodeList of elements docs

If you are just selecting one instance of this button use querySelector
It accepts a valid CSS selector, so to select this button with its class, use the . plus its class :

querySelector(".Button__button--11-3-6 Button__action--11-3-6 Button__isEllipsis--11-3-6 spcv_showMoreRepliesText")

Or you can select with attributes such as:

querySelector("button[data-open-web-class=conversation-message-show-replies]")