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

Question

我正在尝试使用JavaScript构建一系列水果，为此，我需要获取li元素的所有ul个子元素的文本值。我取得了一些进步，因为我能够找到我的名单上的孩子数量。

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

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

的第一个元素

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

我能够获得元素，但我无法获得它的测试值。在这里，我试图获得文本值apple，我已经尝试了几乎所有内容。我试过了

1. $("#fruits-list > li")[0].text
2. $("#fruits-list > li")[0].html
3. $("#fruits-list > li")[0].val

我为这三个人得到了undefined。我还尝试在所有这些内容中添加()，但获得了TypeError: Is not a function。

我在SO上找不到答案。任何帮助表示赞赏。提前谢谢。

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