如何选择具有“角色”属性的元素？答案

【问题标题】：How to select an element with attribute "role"?如何选择具有“角色”属性的元素？
【发布时间】：2020-10-12 14:43:11
【问题描述】：

我已经学会了如何通过标签来提醒元素。

 alert(document.querySelector("html")
.innerHTML);

我想按角色使用警报。我不知道如何开始，所以我在这里询问任何想法。顺便一提。角色="文章"

【问题讨论】：

【解决方案1】：

那就是attribute selection

const firstArticle = document.querySelector("[role=article]");
const allArticles  = document.querySelectorAll("[role=article]");

您可以循环 - 这里我使用 ...spread 运算符转换为数组，因为一些较早的较新浏览器在 HTML 集合上没有 forEach

[...document.querySelectorAll("[role=article]")]
  .forEach(article => console.log(article.innerHTML));

最新的 Chrome、Firefox 和 Edge 可以做到

document.querySelectorAll("[role=article]")
  .forEach(article => console.log(article.innerHTML));

注意：forEach 是somewhat slower than for，但更具可读性。如果页面上没有数千篇文章，那也没关系。如果你确实想使用for，那么

【讨论】：

forEach 不是比for 循环慢吗？
是的。但是你认为一个页面上有 10 篇文章重要吗？
然后我们需要查看 for..in：for (let value of myArray) { console.log(value); } 比 for (let i=0, n=myArray.length; i<n; i++) { console.log(myArray[i]); } 慢
谢谢先生，那么如何添加警报？
如果按 F12，console.log 会显示内容。如果您在循环中将 console.log 替换为 alert，您将收到每篇文章的警报 - 但这会很烦人，所以也许不要警报？