下面是我需要通过JavaScript查找的html:
<i class="material-icons bh-icon-accordion">keyboard_arrow_up</i>
我有一个arrow_up
元素和几个arrow_down
元素,所以用class
查找该元素不是一种选择。此外,该项目没有id
属性,因此document.getElementById
不是一个选择。
是否可以通过“ keyboard_arrow_up
”找到它?
答案 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