DOM Selection/Query without jQuery

I think I’m way so outdated from the modern HTML/CSS/JavaScript world already due to working with classic libraries and tools for a very long time. As I view a Facebook Group members list, I wonder if some of the members are in my blocked users list. jQuery could have saved me from the hassle but it seems that Facebook is not using jQuery anymore (are they using it before in the first place?). I remember GitHub removed jQuery from their JS libraries and I remember a simple DOM query it used which is provided by modern browsers so I decided to try it myself.

document.querySelectorAll()

Using document.querySelectorAll(), you can select DOM elements and it returns a list (or is it an array?). With the result, we can process it like normal DOM elements. So, here is how I dumped all member names from this specific Facebook group.

document.querySelectorAll(".uiProfileBlockContent ._60ri a").forEach(function (node) {
    console.log(node.innerText)
});

Note: Classes and DOM structure may have changed, but if you are familiar with how HTML works, you can just replace the selector with the new structure if Facebook changes them.

Now, for the blocked list names:

document.querySelectorAll("._iw3 table.uiInfoTable span.fcb").forEach(function (node) {
    console.log(node.innerText);
});

No member is in my blocked list

After getting the two lists, I dumped them into the SublimeText editor and compare them to view which members are in my blocked list. Fortunately, there is none. Is it possible that Facebook won’t show the member name in the group members list if I have blocked them? I’m not sure. Hopefully, those toxic people that I have blocked are not in this group.

This entry was posted in JavaScript, Web Development. Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *