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上 ）获取列表。