vue3+echarts应用——深度遍历html的dom结构并用树图进行可视化

简介: vue3+echarts应用——深度遍历html的dom结构并用树图进行可视化

⭐前言

大家好,我是yma16,本文分享关于 vue3+echarts应用——深度遍历 html 的 dom结构并使用树图进行可视化。

💖vue3系列文章

vue3 + fastapi 实现选择目录所有文件自定义上传到服务器

前端vue2、vue3去掉url路由“ # ”号——nginx配置

csdn新星计划vue3+ts+antd赛道——利用inscode搭建vue3(ts)+antd前端模板

认识vite_vue3 初始化项目到打包

python_selenuim获取csdn新星赛道选手所在城市用echarts地图显示

让大模型分析csdn文章质量 —— 提取csdn博客评论在文心一言分析评论区内容

前端vue3——html2canvas给网站截图生成宣传海报

vue3+echarts可视化——记录我的2023编程之旅

html数据结构的特征

HTML的结构是由标签组成的,标签分为两类:封闭标签和非封闭标签。

封闭标签(闭合标签)是指在标签内部添加内容,需要使用开始标签和结束标签将内容包裹起来。

⭐html数据解析

分析html的结构

HTML DOM (Document Object Model) 数据结构是一种树状结构,用于表示HTML文档的结构和内容。它允许开发者通过JavaScript来操作和修改HTML元素、属性和文本内容。

HTML DOM 的树状结构包含以下几个主要的节点类型:

  1. Document节点:代表整个HTML文档,是DOM树的根节点。
  2. Element节点:代表HTML元素,如、、
  • 等。它们可以包含子节点和属性。
  1. Text节点:代表HTML文本内容。它是Element节点的子节点,不可以包含其他子节点。
  2. Attribute节点:代表HTML元素的属性。

HTML DOM 数据结构的关系如下:

  • Document节点包含一个或多个Element节点,每个Element节点可以包含其他Element节点或Text节点。
  • Element节点可以包含一个或多个Text节点,每个Text节点都是Element节点的子节点。
  • Element节点可以包含一个或多个Attribute节点,每个Attribute节点都是Element节点的属性。

开发者可以使用JavaScript通过HTML DOM数据结构来访问和修改HTML文档。例如,可以使用getElementById()来获取特定id的元素,使用innerHTML来修改元素的内容,使用setAttribute()来设置元素的属性等。

💖 html字符串转为html对象

可以使用DOMParser对象将HTML字符串转换为DOM对象。

const parser = new DOMParser();
const htmlString = '<div><h1>Hello World</h1><p>This is a paragraph</p></div>';
const doc = parser.parseFromString(htmlString, 'text/html');
console.log(doc);

上述代码将HTML字符串解析为DOM对象,然后将DOM对象打印到控制台。你可以使用doc对象进行进一步的DOM操作

💖 深度遍历html对象内容

javascript深度遍历html的节点

function traverse(node) {
  // 遍历当前节点的子节点
  for (let i = 0; i < node.childNodes.length; i++) {
    const child = node.childNodes[i];
    // 如果是元素节点,打印节点名称,并递归遍历子节点
    if (child.nodeType === 1) {
      console.log(child.nodeName);
      traverse(child);
    }
  }
}
// 获取根节点(document.documentElement为整个页面的根节点)
const root = document.documentElement;
// 调用深度遍历函数
traverse(root);

⭐echarts 树图的渲染

echarts渲染树状图的基础数据结构

const data = {
  name: 'tree',
  children: [
    {
      name: 'parent',
      children: [
        {
          name: 'children1',
          children: [
            { name: 'children11', value: 721 },
            { name: 'children112', value: 4294 }
          ]
        },
       ]}]
};

💖 处理html内容为树状结构

javascript处理html内容为树状结构

import axios from 'axios'
const getHtmlDoc = (htmlString) => {
    const parser = new DOMParser();
    const doc = parser.parseFromString(htmlString, 'text/html');
    return doc
}
function traverse(node) {
    const children = []
    const name = node.nodeName
    // 遍历当前节点的子节点
    for (let i = 0; i < node.childNodes.length; i++) {
        const child = node.childNodes[i];
        // 如果是元素节点,打印节点名称,并递归遍历子节点
        if (child.nodeType === 1) {
            const childItem = traverse(child)
            children.push(childItem);
        }
    }
    return {
        name,
        children
    }
}
const genTreeData = async (htmlHref) => {
    // 请求 html 内容
    const {data:htmlContent}=await axios.get(htmlHref)
    console.log('htmlContent',htmlContent)
    const htmlDoc = getHtmlDoc(htmlContent)
    const treeData=traverse(htmlDoc.body)
    console.log('treeData',treeData)
    return treeData
}
export const treeData =genTreeData

💖 渲染树状图

vue3 渲染ecahrts树状图

<template>
    <div>
        <a-input-search v-model:value="state.htmlHref" placeholder="输入html链接" style="width: 100%;margin:10px;" @search="onSearch" />
        <div id="treeChartId" style="width:100%;height:600px;margin: 0 auto"></div>
    </div>
</template>
<script setup>
import * as echarts from 'echarts';
import { reactive, onUnmounted, onMounted } from 'vue';
import { treeData } from './data.js'
const state = reactive({
    exportLoading: false,
    echartInstance: undefined,
    treeData: [],
    htmlHref:'htmlContent.html'
})
function renderEchartLine() {
    // 基于准备好的dom,初始化echarts实例
    const domInstance = document.getElementById('treeChartId')
    if (domInstance) {
        domInstance.removeAttribute('_echarts_instance_')
    }
    else {
        return
    }
    const myChart = echarts.init(domInstance);
    const data = state.treeData
    const option = {
        title: {
            text: 'html可视化',
            textStyle: {
                color: '#ffffff'
            }
        },
        tooltip: {
            trigger: 'item',
            triggerOn: 'mousemove'
        },
        series: [
            {
                type: 'tree',
                id: 0,
                name: 'html tree',
                data: [data],
                top: '10%',
                left: '8%',
                bottom: '22%',
                right: '20%',
                symbolSize: 7,
                edgeShape: 'polyline',
                edgeForkPosition: '63%',
                initialTreeDepth: 3,
                lineStyle: {
                    width: 2
                },
                label: {
                    backgroundColor: '#fff',
                    position: 'left',
                    verticalAlign: 'middle',
                    align: 'right'
                },
                leaves: {
                    label: {
                        position: 'right',
                        verticalAlign: 'middle',
                        align: 'left'
                    }
                },
                emphasis: {
                    focus: 'descendant'
                },
                expandAndCollapse: true,
                animationDuration: 550,
                animationDurationUpdate: 750
            }
        ]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option, true);
    // 监听
    state.echartInstance = myChart;
    window.onresize = myChart.resize;
}
const onSearch=async (htmlHref)=>{
    state.treeData = await treeData(htmlHref)
    renderEchartLine()
}
onUnmounted(() => {
    window.onresize = null
})
const getHubConfig = async () => {
    state.treeData = await treeData(state.htmlHref)
    renderEchartLine()
}
onMounted(() => {
    getHubConfig()
})
</script>

效果:

💖 inscode代码块

⭐总结

深度遍历

树的深度遍历算法有两种方式:先序遍历和后序遍历。

先序遍历(Preorder Traversal)是指先访问根节点,然后递归地先序遍历左子树,再递归地先序遍历右子树。

后序遍历(Postorder Traversal)是指先递归地后序遍历左子树和右子树,然后访问根节点。

html结构解析

HTML使用标签来定义文档的结构和内容。标签以尖括号(< >)包围,并且通常成对出现,其中一个是开始标签,另一个是结束标签

html的标签成对出现可以用栈的数据结构来存储

⭐结束

本文分享到这结束,如有错误或者不足之处欢迎指出!


目录
相关文章
|
14天前
|
数据采集 移动开发 搜索推荐
HTML基础-HTML5新增语义标签:解锁网页结构新维度
【6月更文挑战第5天】本文介绍了HTML5的语义标签,旨在提升网页结构化和可访问性。核心语义标签包括`&lt;header&gt;`、`&lt;nav&gt;`、`&lt;main&gt;`、`&lt;article&gt;`、`&lt;section&gt;`、`&lt;aside&gt;`、`&lt;footer&gt;`、`&lt;figure&gt;`和`&lt;figcaption&gt;`。常见问题包括滥用标签作布局工具、忽略`&lt;main&gt;`、不恰当嵌套和忽视辅助功能。
|
21天前
|
移动开发 HTML5
HTML基本结构标签解析
HTML基本结构标签解析
18 0
|
28天前
|
前端开发 JavaScript
HTML DOM如何通过JavaScript动态改变元素的CSS样式?
【5月更文挑战第23天】HTML DOM如何通过JavaScript动态改变元素的CSS样式?
30 1
|
28天前
|
JavaScript 前端开发 开发者
HTML DOM
【5月更文挑战第23天】HTML DOM
18 1
|
1月前
|
前端开发 JavaScript
React中渲染html结构---dangerouslySetInnerHTML
React中渲染html结构---dangerouslySetInnerHTML
27 0
|
1月前
|
JavaScript 前端开发 UED
【Web 前端】如何将一个 HTML 元素添加到 DOM 树中的?
【5月更文挑战第2天】【Web 前端】如何将一个 HTML 元素添加到 DOM 树中的?
|
1月前
|
移动开发 前端开发 开发者
【专栏:HTML进阶篇】网页结构与语义化标签进阶
【4月更文挑战第30天】提升网页结构清晰度和无障碍访问性,有利于SEO。这些标签为屏幕阅读器提供额外上下文,简化CSS样式设计,避免无意义的&lt;div&gt;和&lt;span&gt;。正确使用语义化标签是现代网页开发的关键,能创造更优质、易访问和优化的Web体验。
|
1月前
|
移动开发 前端开发 JavaScript
【专栏:HTML基础篇】深入HTML元素:理解结构与内容
【4月更文挑战第30天】本文探讨了HTML在构建网页中的核心作用,HTML元素构成网页结构与内容,包括`&lt;!DOCTYPE html&gt;`、`&lt;html&gt;`、`&lt;head&gt;`、`&lt;body&gt;`等基本元素及`&lt;div&gt;`、`&lt;span&gt;`、`&lt;a&gt;`、`&lt;img&gt;`等丰富标签。理解并恰当使用这些元素能创建清晰结构、优化SEO、增强交互性,并实现语义化,为打造功能强大且美观的网站奠定基础。进一步学习CSS和JavaScript将提升网页视觉效果和互动性。
|
1月前
|
前端开发 JavaScript
浏览器通过构建DOM树来解析HTML代码
【4月更文挑战第30天】浏览器通过构建DOM树来解析HTML代码
29 1
|
1月前
|
JavaScript 前端开发
JavaScript DOM 文档对象模型(获取、改变html元素)
JavaScript DOM 文档对象模型(获取、改变html元素)