[英]how to get text inside a li element on click in pure javascript
愚蠢的代碼只能與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)。還有其他人可以幫助我嗎?
提前致謝
使用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>
您可以使用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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.