I'm currently exploring the creation process of the front-end page for WhatsApp Web, specifically focusing on the list of contacts located on the left side (<div id="pane-side">). The contact names within this list are identified by the class "emojitext ellipsify". I am attempting to retrieve all contact names using the following JavaScript code:
var contatosTemp = document.getElementsByClassName('emojitext ellipsify');
var contatos = [];
for (var i = 0; i < contatosTemp.length; i = i + 2) { contatos.push(contatosTemp[i].innerText); }
contatos
When the scroll position of the contact list is at the top, the count of contatos is 19. However, as I scroll through the list, this count increases up to 29. Conversely, upon minimizing the window, the count drops down to 15.
In essence, the number of contacts in the list, retrieved through the aforementioned JavaScript, fluctuates based on user interaction with the scroll functionality.
If you wish to replicate my exploration, simply open your WhatsApp Web, access browser DevTools > Console, and run the provided JavaScript code.
You will observe the size of the contatos array:
https://i.sstatic.net/DRPXH.png
Proceed to scroll through the left pane of the screen and execute the JavaScript once more. This action will showcase a change in the array size.
My goal is to obtain all the names of contacts present, but the current JavaScript implementation only captures a portion. How can I achieve this comprehensive data retrieval?