trouble changing span text size attributes on Reddit comments

Question

I cannot seem to change the upvote count in the comment section of Reddit to display 0 or none for example. First time using JS go easy. Testing this in Firefox.

const commentElement = document.querySelectorAll('span.p-0.text-12');


    commentElement.forEach(commentElement => {

        commentElement.style.fontSize = '0';
    });

I have tried looping through the spans and directly changing the size. No dice. Let me know if this is more trivial in JQuery. Thanks!

Revised: Randomly decides to hide all upvotes. Sometimes works. Must also refresh page to see if it works either way...

    const posts = document.querySelectorAll("shreddit-comment-action-row");

Object.values(posts).map( (post) =>{ post.shadowRoot.querySelector("faceplate-number").style.display="none";

Answer 1

Looks very impressive that you have tried doing this on your first phase of JavaScript journey, else we had just binged all playlists on YouTube.

Coming To The Problem:- Reddit loads all posts in ShadowRoot Interface that gets rendered separately from document's Main DOM Tree, thats why queryselector can't directly access it

So if you plan to hide the upvote numbers, here is the code:-

const posts = document.querySelectorAll("shreddit-post");
Object.values(posts).map( (post) =>{ post.shadowRoot.querySelector("faceplate-number").style.display="none";
})

If you want to change any CSS properties, you can play with it by adding after style