当前位置：首页 > C > 正文

C语言DOM树结构（从零开始构建自己的文档对象模型）

主机测评网
C
2025-12-20
254

在Web开发中，我们经常听到“DOM”（Document Object Model，文档对象模型）这个词。它是一种将HTML或XML文档表示为树形结构的编程接口。虽然DOM通常与JavaScript关联，但你是否知道，也可以用C语言来手动实现一个简单的DOM树结构？本教程将手把手教你如何用C语言构建一个基础的DOM树，适合编程小白入门学习。

C语言DOM树结构（从零开始构建自己的文档对象模型） C语言DOM树结构 C语言实现DOM DOM树数据结构 C语言XML解析第1张

什么是DOM树？

DOM树是一种层次化的数据结构，用于表示文档中的元素、属性和文本内容。每个节点可以是元素节点、文本节点或属性节点。例如，以下HTML片段：

<html>  <head>    <title>示例</title>  </head>  <body>    <p>Hello World</p>  </body></html>

会被解析成一棵树，根节点是<html>，其子节点包括<head>和<body>，依此类推。

为什么用C语言实现DOM树？

虽然现代开发中很少直接用C语言处理DOM，但通过手动实现DOM树，你可以深入理解：

树形数据结构的工作原理
内存管理（malloc/free）的实际应用
递归遍历与操作节点的方法
C语言DOM树结构的基本设计思路

步骤一：定义DOM节点结构

首先，我们需要定义一个结构体来表示DOM中的节点。每个节点包含标签名、文本内容、子节点列表和兄弟节点指针。

#include <stdio.h>#include <stdlib.h>#include <string.h>typedef struct DomNode {    char* tag_name;        // 元素标签名，如 "div", "p"    char* text_content;    // 文本内容，如 "Hello"    struct DomNode* first_child;  // 第一个子节点    struct DomNode* next_sibling; // 下一个兄弟节点} DomNode;

步骤二：创建新节点

接下来，我们写一个函数来创建新的DOM节点：

DomNode* create_node(const char* tag, const char* text) {    DomNode* node = (DomNode*)malloc(sizeof(DomNode));    if (!node) return NULL;    node->tag_name = tag ? strdup(tag) : NULL;    node->text_content = text ? strdup(text) : NULL;    node->first_child = NULL;    node->next_sibling = NULL;    return node;}

步骤三：添加子节点

为了让父节点拥有子节点，我们需要一个添加子节点的函数：

void add_child(DomNode* parent, DomNode* child) {    if (!parent || !child) return;    if (!parent->first_child) {        parent->first_child = child;    } else {        DomNode* current = parent->first_child;        while (current->next_sibling) {            current = current->next_sibling;        }        current->next_sibling = child;    }}

步骤四：遍历并打印DOM树

为了验证我们的DOM树是否正确构建，可以写一个递归函数来打印整棵树：

void print_tree(DomNode* node, int depth) {    if (!node) return;    // 打印缩进    for (int i = 0; i < depth; i++) printf("  ");    if (node->tag_name) {        printf("<%s>\n", node->tag_name);    } else if (node->text_content) {        printf("%s\n", node->text_content);    }    // 递归打印子节点    print_tree(node->first_child, depth + 1);    // 打印兄弟节点（在同一层级）    print_tree(node->next_sibling, depth);}

完整示例：构建一个简单HTML结构

现在，我们将所有代码组合起来，构建一个类似<html><body><p>Hello</p></body></html>的结构：

int main() {    DomNode* html = create_node("html", NULL);    DomNode* body = create_node("body", NULL);    DomNode* p = create_node("p", NULL);    DomNode* text = create_node(NULL, "Hello");    add_child(p, text);    add_child(body, p);    add_child(html, body);    print_tree(html, 0);    // 注意：实际项目中应释放所有malloc的内存    return 0;}

运行后输出：