需要使用子节点显示列表中的文本

基础概念

在计算机科学中，子节点通常指的是树形结构中的一个节点的直接后继节点。这种结构广泛应用于数据表示，如文件系统、XML/JSON解析、组织结构图等。在前端开发中，子节点的概念也常用于描述DOM（文档对象模型）树中的元素关系。

类型

常见的树形结构包括二叉树、B树、红黑树、XML DOM树等。在前端开发中，主要涉及到的是HTML DOM树。

应用场景

文件系统：文件和文件夹的层次结构就是一种树形结构。
XML/JSON解析：这些数据格式天然具有树形结构的特点。
前端页面渲染：HTML文档被解析成DOM树，浏览器根据这个树来渲染页面。
组织结构图：公司或组织的层级关系可以用树形结构来表示。

示例代码（前端展示子节点）

假设我们有一个简单的HTML结构，其中包含一个<ul>列表，每个列表项<li>都是一个节点，子节点可以是嵌套的<ul>列表。

<ul id="myList">
  <li>节点1
    <ul>
      <li>子节点1.1</li>
      <li>子节点1.2</li>
    </ul>
  </li>
  <li>节点2
    <ul>
      <li>子节点2.1</li>
    </ul>
  </li>
  <li>节点3</li>
</ul>

我们可以使用JavaScript来遍历并显示这些子节点：

function displayChildNodes(node) {
  if (node.childNodes.length > 0) {
    node.childNodes.forEach(child => {
      console.log(child.textContent);
      displayChildNodes(child); // 递归遍历子节点
    });
  }
}

const list = document.getElementById('myList');
displayChildNodes(list);