如何让一个li元素内的文本上单击纯JavaScript

时间:2019-02-02 15:36:04

标签: javascript css-selectors html-lists innerhtml

在folliwing码与方法的getElementById工作ONLY,但我需要它甚至作品的情况下不存在元件上的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)。 是别人有任何人能帮助我吗?

预先感谢

2 个答案:

答案 0 :(得分: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>

答案 1 :(得分:1)

您可以使用document.querySelectorAll()
注意:你不能只是设置事件为document.querySelectorAll() {一样{1}}您需要通过整个数组循环

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