如何在纯 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>

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

通常 jquery 我可以制作 $("#container ul li ul li").on("click, ... 但我正在尝试使用纯 javascript (vanilla 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>

如何在纯 javascript 中单击时获取 li 元素内的文本

how to get text inside a li element on click in pure javascript

javascript

innerhtml

css-selectors

html-lists