JavaScript-如何获取DOM元素的第一个孩子的文本？

Question

我试图在JavaScript中构建一个水果数组，并且这样做，我需要获取ul元素的所有li子元素的文本值。 我取得了一些不错的进步，因为我能够找到列表中的孩子人数。

$("#fruits-list > li").length
=> 6

我也可以按索引查找元素。 在这里，我找到了第一个使用此元素的元素

$("#fruits-list > li")[0]
=> <li id="apple">Apple</li>

我可以获取该元素，但是无法获取该元素的测试值。 在这里，我试图获取文本值apple ，而我几乎尝试了所有东西。 我试过了

我得到undefined为他们三个。 我还尝试了在所有方法的末尾添加() ，但遇到TypeError: Is not a function 。

我在这里找不到答案。 任何帮助表示赞赏。 提前致谢。

Answer 1

当将括号符号与jQuery元素上的索引一起使用时，您将获得一个DOM元素。 这些对象不能直接用jQuery函数调用。 请改用eq 。

采用

$("#fruits-list > li").eq(0).text()

请注意，如果最终目标是建立LI元素文本的数组，则只需

var arr = $("#fruits-list > li").map(function(){ return $(this).text() }).get();

Answer 2

text ， html和val不是DOM的属性，它们是jQuery方法。

您可以简单地执行自然的JS方法。

document.querySelector("#fruits-list > li").textContent; //or innerText for legacy IE

querySelector返回元素列表的第一项。 （但是，如果您使用jQuery，我建议dystroy的答案）

Answer 3

当您访问$("#fruits-list > li")[0] ，您将获得一个HTMLElement对象，这就是为什么您不能在其上使用jQuery函数的原因。 dystroy的解决方案让您使用jQuery获取文本，因为eq返回jQuery的实例。 你也可以

$("#fruits-list > li")[0].textContent