如何在纯JavaScript中单击li元素内获取文本

Question

愚蠢的代码只能与getElementById方法一起使用，但是即使在元素上没有ID的情况下，我也需要它才能起作用。

我的HTML是：

<div id="container">
<ul class="menu">
<li>
<ul class="submenu">
<li>text i have to get</li>
</ul>
</li>
</ul>
</div>

我的JS是：

<script>
var el = document.getElementById("pid");
el.onclick = function what_to_do(){
var theText = this.innerHTML;
alert(theText);
</script>

所以我需要在用户单击它时在没有ID的最深嵌套LI元素中获取文本。

通常用jquery我可以使$（“＃container ul li ul li”）。on（“ click，...，但我正在尝试使用纯JavaScript（香草js）。还有其他人可以帮助我吗？

提前致谢

Answer 1

使用document.querySelector

 var el = document.querySelector("#container > .menu > li > .submenu > li"); el.onclick = function what_to_do(){ var theText = this.innerHTML; alert(theText); } 

 <div id="container"> <ul class="menu"> <li> <ul class="submenu"> <li>text i have to get</li> </ul> </li> </ul> </div> 

Answer 2

您可以使用document.querySelectorAll() 。
注意 ：您不能像jQuery那样仅将事件设置为document.querySelectorAll()您需要遍历整个数组

 const items = document.querySelectorAll('li > ul > li'); items.forEach(item => { item.addEventListener('click',(e)=>{ console.log(e.target.textContent); } ) }) 

 <div id="container"> <ul class="menu"> <li> <ul class="submenu"> <li>text i have to get</li> </ul> </li> </ul> </div>