如何从 HTML 元素构建树形结构：一个分步指南

2024-03-15 06:09:02

## 从 HTML 元素构建树形结构：步步指南

导言

在构建复杂的 Web 应用程序时，我们经常需要组织和可视化嵌套数据。树形结构是一种强大的工具，可以有效地表示层级数据，并使我们能够以清晰且直观的方式呈现信息。本文将带你逐步了解如何将 HTML 元素转换为树形结构，从而帮助你轻松掌握这一重要技术。

步骤 1：剖析 HTML 元素

第一步是遍历给定的 HTML 元素，为每个元素收集必要的信息。这包括其唯一 ID、类型和子元素。使用 querySelectorAll 方法，我们可以递归地获取所有子元素，深入 HTML 结构的每一层。

步骤 2：提取元素数据

对于每个元素，我们需要提取其 ID、类型和子元素。ID 可以通过 querySelector 方法获得，而类型则可以通过 getAttribute 方法获得。子元素是通过递归调用第一步获得的。

步骤 3：构建树形结构

收集了元素数据后，我们就可以开始构建树形结构了。每个元素将表示为一个包含以下属性的对象：

id
type
children：一个包含该元素所有子元素对象的数组

通过连接这些对象，我们将形成一个反映 HTML 层级结构的树形结构。

步骤 4：返回树形结构

完成元素遍历后，我们将返回构建的树形结构。该结构将提供有关 HTML 元素之间关系的完整视图。

JavaScript 代码实现

以下 JavaScript 代码实现了上述步骤，允许你从 HTML 元素中动态生成树形结构：

buildDraggedHierarchy(el) {
    if (!el) {
        return [];
    }

    const children = [...el.querySelectorAll(":scope>div")];
    const output = children.map((child) => ({
        id: child.querySelector(".single-element") ? child.querySelector(".single-element").id : child.id, 
        type: child.getAttribute("type"), 
        children: this.buildDraggedHierarchy(child.querySelector(".draggable-container")), 
    }));

    return output;
}

应用示例

为了更好地理解树形结构的应用，让我们考虑一个实际场景。假设我们有一个嵌套的 HTML 元素列表，如下所示：

<ul>
  <li>Item 1
    <ul>
      <li>Item 1.1</li>
      <li>Item 1.2</li>
    </ul>
  </li>
  <li>Item 2</li>
  <li>Item 3
    <ul>
      <li>Item 3.1</li>
      <li>Item 3.2</li>
      <li>Item 3.3
        <ul>
          <li>Item 3.3.1</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

通过应用上述步骤，我们可以从这个 HTML 结构中创建以下树形结构：

{
  id: null,
  type: "ul",
  children: [
    {
      id: null,
      type: "li",
      children: [
        {
          id: null,
          type: "ul",
          children: [
            {
              id: null,
              type: "li",
              children: []
            },
            {
              id: null,
              type: "li",
              children: []
            }
          ]
        }
      ]
    },
    {
      id: null,
      type: "li",
      children: []
    },
    {
      id: null,
      type: "li",
      children: [
        {
          id: null,
          type: "ul",
          children: [
            {
              id: null,
              type: "li",
              children: []
            },
            {
              id: null,
              type: "li",
              children: []
            },
            {
              id: null,
              type: "li",
              children: [
                {
                  id: null,
                  type: "ul",
                  children: [
                    {
                      id: null,
                      type: "li",
                      children: []
                    }
                  ]
                }
              ]
            }
          ]
        }
      ]
    }
  ]
}