Javascript 如何根据材质图标名称查找元素？

下面是我需要通过JavaScript查找的html：

 <i class="material-icons bh-icon-accordion">keyboard_arrow_up</i>

我有一个arrow\u up元素和几个arrow\u down元素，所以按类查找元素不是一个选项。此外，该项没有id属性，因此document.getElementById不是选项

---

有没有办法通过键盘上的箭头找到它？

给它一个id，你可以通过它来选择它

<i class="material-icons bh-icon-accordion" id="my-selector">keyboard_arrow_up</i>

或

在Angular中，将@ViewChild装饰器与模板引用一起使用

<i class="material-icons bh-icon-accordion" #myselector>keyboard_arrow_up</i>

---

别忘了从@angular/core导入ViewChild，给它一个可以选择的id不会有什么坏处

<i class="material-icons bh-icon-accordion" id="my-selector">keyboard_arrow_up</i>

或

在Angular中，将@ViewChild装饰器与模板引用一起使用

<i class="material-icons bh-icon-accordion" #myselector>keyboard_arrow_up</i>

---

别忘了从@angular/core导入ViewChild，正如@AminJafari在评论中所说的，这是一项非常繁重的操作，可能会破坏您的性能。您仍然可以在第一个实例中限制元素并在以后对其进行过滤，这将产生较低的影响：

Array.from(document.querySelectorAll('.material-icons'))
  .map(_ => _.innerText)
  .filter(text => text === 'keyboard_arrow_up');

---

正如@AminJafari在评论中所说，这是一个非常繁重的操作，可能会扼杀你的表现。您仍然可以在第一个实例中限制元素并在以后对其进行过滤，这将产生较低的影响：

Array.from(document.querySelectorAll('.material-icons'))
  .map(_ => _.innerText)
  .filter(text => text === 'keyboard_arrow_up');

---

您可以根据里面的文本找到元素，但这与最佳实践背道而驰，因为这将是一个非常沉重和低性能的操作。你应该做的是在元素向上箭头时给它一个类名，这样你就可以按类来选择它。你可以根据里面的文本找到元素，但这与最佳实践背道而驰，因为这将是一个非常沉重和低性能的操作。您应该做的是在元素向上箭头时给它一个类名，以便您可以按类选择它。

Array.from(document.querySelectorAll('.material-icons'))
  .map(_ => _.innerText)
  .filter(text => text === 'keyboard_arrow_up');