如何根据“材料图标”名称查找元素?

时间:2018-11-05 15:59:30

标签: javascript html

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

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

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

是否可以通过“ keyboard_arrow_up”找到它?

2 个答案:

答案 0 :(得分:2)

正如@AminJafari在评论中所说,这是一项非常繁重的操作,它可能会破坏您的表现。您仍然可以先限制您的元素,然后再过滤它们,这会产生较小的影响:

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

答案 1 :(得分:0)

给它一个可以选择它的#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 / core导入ViewChild