HTML 获取 li 元素的文本

在本文中，我们将介绍如何通过HTML代码获取 li 元素的文本内容。

阅读更多：HTML 教程

什么是 li 元素

在 HTML 中，li 元素是用于创建列表的标签。li 元素必须嵌套在无序列表（ul）或有序列表（ol）中，用于显示列表项。

下面是一个无序列表的示例：

<ul>
  <li>苹果</li>
  <li>香蕉</li>
  <li>橙子</li>
</ul>

如何获取 li 元素的文本

要获取 li 元素的文本，我们可以使用 JavaScript 中的 DOM 操作方法。

首先，我们需要通过getElementById()、getElementsByTagName() 或者 querySelector() 等方法获取到包含 li 元素的父元素。然后，我们可以使用childNodes 属性或者querySelectorAll() 方法获取到所有的 li 元素。

接下来，我们可以使用textContent 属性来获取每个 li 元素的文本内容。

下面是一个使用 JavaScript 获取 li 元素文本的示例：

<!DOCTYPE html>
<html>
<body>

<ul id="myList">
  <li>苹果</li>
  <li>香蕉</li>
  <li>橙子</li>
</ul>

<script>
var list = document.getElementById("myList");
var items = list.getElementsByTagName("li");

for (var i = 0; i < items.length; i++) {
  console.log(items[i].textContent);
}
</script>

</body>
</html>

上面的代码中，我们首先通过getElementById() 方法获取到具有 “myList” ID 的 ul 元素，然后使用getElementsByTagName() 方法获取到所有的 li 元素。

通过遍历 li 元素的数组，我们可以使用textContent 属性获取每个 li 元素的文本内容，并通过console.log() 方法将其输出到控制台。

如果你打开浏览器的开发者工具（通常是按下F12键），你将在控制台上看到以下输出：

苹果
香蕉
橙子

总结

通过使用 JavaScript 的 DOM 操作方法，我们可以很方便地获取 li 元素的文本内容。首先，我们需要获取到包含 li 元素的父元素，然后使用childNodes 属性或者querySelectorAll() 方法获取到所有的 li 元素，最后使用textContent 属性获取每个 li 元素的文本内容。

希望本文能帮助你了解如何获取 li 元素的文本内容，如果你有任何问题或疑惑，请随时向我们提问。谢谢！