如何根据Material-icons名称查找元素？

Question

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

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

我有一个arrow_up元素和几个arrow_down元素，所以不能通过class查找元素。此外，该项目没有id属性，因此document.getElementById不是一个选项。

有没有办法通过"keyboard_arrow_up“找到它？

Answer 1

正如@AminJafari在评论中所说，这是一个非常繁重的操作，可能会毁了你的性能。您仍然可以在第一个实例中限制您的元素，并在以后过滤它们，这将具有较低的影响：

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

Answer 2

给它一个#id不会有什么坏处，你可以通过它来选择它。

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

或者甚至添加一个额外的类

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

这样您就可以在元素上使用querySelector

const el = document.querySelector("#my-selector");

或

const el = document.querySelector(".my-selector");

在Angular中，使用带有模板引用的@ViewChild装饰器。

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

然后在您的类中，使用ViewChild绑定到它

@ViewChild('myselector') 
private myElement : ElementRef; 

别忘了从@angular/ ViewChild导入核心