Javascript. get all element by aria-label and class

Question

I'm trying to count the number of mails in outlook (and i works), but for the unreaded messages i'm looking for the aria-label where i could find "No leído"(unread), i tried using this array method and then return his lenght, but i doesn't work, any suggestions?

function getMailElementsByClass(document_root) {
    var elements = document_root.getElementsByClassName("_1xP-XmXM1GGHpRKCCeOKjP");
    var mailsRead = 0;
    var unRead = [];
    for(var i=0; i<elements.length; i++) {
        console.log(elements[i]);
        mailsRead++;
    }
    Array.from(elements).forEach(v => v.getAttribute('aria-label').startsWith('No Leído') ? unRead.push(v) : v);
    return mailsRead + ' Mails registrados! \nMails no leídos: ' + unRead.length;
}

Can you use `querySelector`? If so try selecting using `'._1xP-XmXM1GGHpRKCCeOKjP[aria-label]'`. — evolutionxbox, Oct 11 '20 at 23:49

score 0 · Accepted Answer · answered Oct 12 '20 at 00:21

.getElementsByClassName() is a 25+ year old API that, while still valid code, should be avoided because it returns a "live" node list and has performance implications (especially when looping over it). Instead use .querySelectorAll(), which accepts any valid CSS selector. Additionally, you can query for both the class you seek and elements with that class that have the attribute you seek that start the way you want.

FYI: The CSS syntax for an attribute value that starts with certain characters is ^=. More on attribute selectors here.

The overall code is much simpler and doesn't even require a loop.

function getUnreadMailElements(doc) {
  let unRead = doc.querySelectorAll("._1xP-XmXM1GGHpRKCCeOKjP[aria-label^='No Leído']");
  return mailsRead + ' Mails registrados! \nMails no leídos: ' + unRead.length;
}

Could i use it also for the total of mails readed? using the same method without the aria-label? — Carlos Rodriguez, Oct 12 '20 at 21:11

Javascript. get all element by aria-label and class

1 Answers1