时间戳

首页 > 解决方案 > Javascript。通过 aria-label 和 class 获取所有元素

javascript - Javascript。通过 aria-label 和 class 获取所有元素

问题描述

我正在尝试计算 Outlook 中的邮件数量（我正在工作），但是对于未读邮件，我正在寻找可以找到“No leído”（未读）的 aria-label，我尝试使用这个数组方法然后返回他的长度，但我不工作，有什么建议吗？

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;
}

标签： javascriptsortingdom

解决方案

.getElementsByClassName()是一个 25 年以上的 API，虽然仍然是有效的代码，但应该避免使用它，因为它返回一个“活动”节点列表并具有性能影响（尤其是在循环它时）。而是使用.querySelectorAll()，它接受任何有效的 CSS 选择器。此外，您可以查询您寻找的类和具有您寻找的以您想要的方式开始的属性的该类的元素。

仅供参考：以某些字符开头的属性值的 CSS 语法是^=. 更多关于属性选择器的信息。

整体代码要简单得多，甚至不需要循环。

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

推荐阅读