javascript如何從li列表中的div獲取文本

Question

我在里面有li的ul列表，在li文本和div里面。 為li分配了相同的類，為div分配了不同的類名。

我只想從div而不是從li獲得文本。

只需從div獲取“ 我需要此文本112 ”即可。 我在嘗試：

 li = ul.getElementsByTagName('li'); 

 <ul class="category"> <li class="hero" href="page1.htm"> <a href="page1.htm"><img src="img/001.png" /></a> <div class="Hello"> <a href="page1.htm">I need this text&nbsp;112</a> </div> </li> 

但這給了我一個錯誤。

Answer 1

使用querySelector從document查找元素，或者，如果已經有ul的引用，則可以將其用作起點。

 var elem = document.querySelector(".category li div.Hello a"); // or var elem = ul.querySelector("li div.Hello a") alert(elem.textContent) 

 <ul class="category"> <li class="hero" href="page1.htm"> <a href="page1.htm"><img src="img/001.png"></a> <div class="Hello"> <a href="page1.htm">I need this text</a> </div> </li> </ul> 

Answer 2

您可以使用document.querySelector向它傳遞一個包含任何有效CSS選擇器的字符串，它將返回對第一個匹配元素的引用。 還有一個Element#querySelector ，當您的起點是一個元素（就像您的ul ）時，它執行相同的操作。 有了元素后，盡管您也可以在某些瀏覽器中使用innerText ，但textContent可能是現在獲取文本的最佳方法。 （如果要HTML，而不僅僅是文本，也可以在任何瀏覽器上使用innerHTML 。）例如：

text = ul.querySelector(".hello a").textContent;

如果可能有多個匹配項，並且您不希望第一個匹配項，請改為從querySelectorAll （在document ， 在elements上 ）獲取列表。