网页页面的标签嵌套层级的显示方法和装置

摘要

本发明公开了一种网页页面的标签嵌套层级的显示方法和装置，所述方法包括：读取当前打开的网页页面的DOM对象树；DOM对象树包括网页页面的body标签节点的所有子标签节点，以及每一个子标签节点的后代标签节点；对DOM对象树进行先序遍历，获取遍历到的标签节点的属性信息；生成与遍历到的标签节点所在的层级相匹配的层级数值；将属性信息和层级数值进行关联，生成标签信息集合，并根据标签信息集合生成网页页面的标签嵌套层级的热力图，以展示网页页面的标签嵌套层级。采用本发明能够快捷且直观地了解到网页页面的标签嵌套层级。

权利要求

1.一种网页页面的标签嵌套层级的显示方法，其特征在于，包括：读取当前打开的网页页面的DOM对象树；所述DOM对象树包括所述网页页面的body标签节点的所有子标签节点，以及每一个子标签节点的后代标签节点；

对所述DOM对象树进行先序遍历，获取遍历到的标签节点的属性信息；

生成与遍历到的标签节点所在的层级相匹配的层级数值；

将所述属性信息和所述层级数值进行关联，生成标签信息集合；

根据所述标签信息集合生成所述网页页面的标签嵌套层级的热力图，以展示所述网页页面的标签嵌套层级；

所述属性信息包括标签节点的尺寸参数和所述标签节点相对于浏览器窗口左上角的坐标；其中，所述尺寸参数为宽度和长度；

所述根据所述标签信息集合生成所述网页页面的标签嵌套层级的热力图，以展示所述网页页面的标签嵌套层级，具体包括：提取所述标签信息中所有标签节点的属性信息和层级数值，并根据每个标签节点的属性信息和层级数值在预设的画布上绘制对应的具有标记信息的矩形区域，以得到目标画布；其中，每一个矩形区域的位置和尺寸与一个标签节点的坐标和尺寸参数相对应，每一个矩形区域的标记信息与一个标签节点的层级数值相对应；

根据所述目标画布生成所述网页页面的标签嵌套层级的热力图；

在浏览器窗口中显示所述标签嵌套层级的热力图，以展示所述网页页面的标签嵌套层级。

2.如权利要求1所述的网页页面的标签嵌套层级的显示方法，其特征在于，所述生成与遍历到的标签节点所在的层级相匹配的层级数值，具体为：在首次遍历当前标签节点时，判断当前标签节点是否为所述body标签节点的子标签节点；

若是，则将所述当前标签节点的层级数值配置为1；

若否，则将当前标签节点的层级数值设置为其父标签节点的层级数值加一后得到的数值。

3.如权利要求1所述的网页页面的标签嵌套层级的显示方法，其特征在于，所述标记信息包括颜色标记信息，且所述颜色标记信息的深度跟所述层级数值成正相关关系；

则所述提取所述标签信息中所有标签节点的属性信息和层级数值，并根据每个标签节点的属性信息和层级数值在预设的画布上绘制对应的具有标记信息的矩形区域，具体包括：重复以下步骤，直至所述标签信息集合内每一个标签节点的属性信息和层级数值都在所述预设的画布上绘制有一个唯一对应的具有颜色标记信息的矩形区域：提取所述标签信息集合内的当前标签节点的属性信息和层级数值；

在预设的画布上绘制一个位置和尺寸分别与所述当前标签节点的坐标和尺寸参数相对应的矩形区域；

查找与所述当前标签节点的层级数值相匹配的预设的颜色参数；

根据查找到的预设的颜色参数设置所述矩形区域的颜色。

4.如权利要求3所述的网页页面的标签嵌套层级的显示方法，其特征在于，所述标记信息还包括数值标记信息；

所述提取所述标签信息中所有标签节点的属性信息和层级数值，并根据每个标签节点的属性信息和层级数值在预设的画布上绘制对应的具有标记信息的矩形区域还包括：在绘制有所述标签信息集合内的所有标签节点对应的矩形区域的画布上的各个连通区域内分别标记与相应连通区域的颜色相匹配的层级数值。

5.一种网页页面的标签嵌套层级的显示装置，其特征在于，包括：DOM对象树读取模块，用于读取当前打开的网页页面的DOM对象树；所述DOM对象树包括所述网页页面的body标签节点的所有子标签节点，以及每一个子标签节点的后代标签节点；

属性信息获取模块，用于对所述DOM对象树进行先序遍历，获取遍历到的标签节点的属性信息；

层级数值生成模块，用于生成与遍历到的标签节点所在的层级相匹配的层级数值；

嵌套层级获取模块，用于将所述属性信息和所述层级数值进行关联，生成标签信息集合；以及，热力图生成模块，用于根据所述标签信息集合生成所述网页页面的标签嵌套层级的热力图，以展示所述网页页面的标签嵌套层级；

所述属性信息包括标签节点的尺寸参数和标签节点相对于浏览器窗口左上角的坐标；

其中，所述尺寸参数为宽度和长度；

所述热力图生成模块具体包括：

矩形区域绘制单元，用于提取所述标签信息中所有标签节点的属性信息和层级数值，并根据每个标签节点的属性信息和层级数值在预设的画布上绘制对应的具有标记信息的矩形区域，以得到目标画布；其中，每一个矩形区域的位置和尺寸与一个标签节点的坐标和尺寸参数相对应，每一个矩形区域的标记信息与一个标签节点的层级数值相对应；

热力图生成单元，用于根据所述目标画布生成所述网页页面的标签嵌套层级的热力图；以及，嵌套层级展示单元，用于在浏览器窗口中显示所述标签嵌套层级的热力图，以展示所述网页页面的标签嵌套层级。

6.如权利要求5所述的网页页面的标签嵌套层级的显示装置，其特征在于，所述层级数值生成模块具体用于：在首次遍历当前标签节点时，判断当前标签节点是否为所述body标签节点的子标签节点；

在当前标签节点是所述body标签节点的子标签节点时，将所述当前标签节点的层级数值配置为1；

在当前标签节点不是所述body标签节点的子标签节点时，将当前标签节点的层级数值设置为其父标签节点的层级数值加一后得到的数值。

7.如权利要求5所述的网页页面的标签嵌套层级的显示装置，其特征在于，所述标记信息包括颜色标记信息，且所述颜色标记信息的深度跟所述层级数值成正相关关系；

则所述矩形区域绘制单元具体用于：

重复以下步骤，直至所述标签信息集合内每一个标签节点的属性信息和层级数值都在所述预设的画布上绘制有一个唯一对应的具有标记信息的矩形区域；

提取所述标签信息集合内的当前标签节点的属性信息和层级数值；

在预设的画布上绘制一个位置和尺寸分别与当前提取到的标签节点的坐标和尺寸参数相对应的矩形区域；

查找与所述当前标签节点的层级数值相匹配的预设的颜色参数；

根据查找到的预设的颜色参数设置所述矩形区域的颜色。

8.如权利要求7所述的网页页面的标签嵌套层级的显示装置，其特征在于，所述标记信息还包括数值标记信息；

所述矩形区域绘制单元还用于：

在绘制有所述标签信息集合内的所有标签节点对应的矩形区域的画布上的各个连通区域内分别标记与相应连通区域的颜色相匹配的层级数值。

说明书

网页页面的标签嵌套层级的显示方法和装置

技术领域

[0001] 本发明涉及网络数据处理领域，尤其涉及一种网页页面的标签嵌套层级的显示方法和装置。

背景技术

[0002] 前端技术人员在搭建网页页面时，通常会将多个HTML标签进行嵌套，以实现多种功能。网页页面搭建完成后，当需要了解网页页面的标签嵌套层级时，多是在网页编辑器或者浏览器的开发者工具中查看网页页面的源代码，再人工一层一层的数。然而，人工操作的速度较慢，且容易出现错误，工作效率以及准确率都较为低下。

发明内容

[0003] 本发明所要解决的技术问题在于，提供一种网页页面的标签嵌套层级的显示方法和装置，能够快捷且直观地了解到网页页面的标签嵌套层级。

[0004] 为了解决上述技术问题，本发明提出了一种网页页面的标签嵌套层级的显示方法和装置，包括：

[0005] 读取当前打开的网页页面的DOM对象树；所述DOM对象树包括所述网页页面的body标签节点的所有子标签节点，以及每一个子标签节点的后代标签节点；

[0006] 对所述DOM对象树进行先序遍历，获取遍历到的标签节点的属性信息；

[0007] 生成与遍历到的标签节点所在的层级相匹配的层级数值；

[0008] 将所述属性信息和所述层级数值进行关联，生成标签信息集合；

[0009] 根据所述标签信息集合生成所述网页页面的标签嵌套层级的热力图，以展示所述网页页面的标签嵌套层级；

[0010] 所述属性信息包括标签节点的尺寸参数和所述标签节点相对于浏览器窗口左上角的坐标；其中，所述尺寸参数为宽度和长度；

[0011] 所述根据所述标签信息集合生成所述网页页面的标签嵌套层级的热力图，以展示所述网页页面的标签嵌套层级，具体包括：

[0012] 提取所述标签信息中所有标签节点的属性信息和层级数值，并根据每个标签节点的属性信息和层级数值在预设的画布上绘制对应的具有标记信息的矩形区域，以得到目标画布；其中，每一个矩形区域的位置和尺寸与一个标签节点的坐标和尺寸参数相对应，每一个矩形区域的标记信息与一个标签节点的层级数值相对应；

[0013] 根据所述目标画布生成所述网页页面的标签嵌套层级的热力图；

[0014] 在浏览器窗口中显示所述标签嵌套层级的热力图，以展示所述网页页面的标签嵌套层级。

[0015] 优选地，所述生成与遍历到的标签节点所在的层级相匹配的层级数值，具体为：

[0016] 在首次遍历当前标签节点时，判断当前标签节点是否为所述body标签节点的子标签节点；

[0017] 若是，则将所述当前标签节点的层级数值配置为1；

[0018] 若否，则将当前标签节点的层级数值设置为其父标签节点的层级数值加一后得到的数值。

[0019] 优选地，所述标记信息包括颜色标记信息，且所述颜色标记信息的深度跟所述层级数值成正相关关系；

[0020] 则所述提取所述标签信息中所有标签节点的属性信息和层级数值，并根据每个标签节点的属性信息和层级数值在预设的画布上绘制对应的具有标记信息的矩形区域，具体包括：

[0021] 重复以下步骤，直至所述标签信息集合内每一个标签节点的属性信息和层级数值都在所述预设的画布上绘制有一个唯一对应的具有颜色标记信息的矩形区域：

[0022] 提取所述标签信息集合内的当前标签节点的属性信息和层级数值；

[0023] 在预设的画布上绘制一个位置和尺寸分别与所述当前标签节点的坐标和尺寸参数相对应的矩形区域；

[0024] 查找与所述当前标签节点的层级数值相匹配的预设的颜色参数；

[0025] 根据查找到的预设的颜色参数设置所述矩形区域的颜色。

[0026] 优选地，所述标记信息还包括数值标记信息；

[0027] 所述提取所述标签信息中所有标签节点的属性信息和层级数值，并根据每个标签节点的属性信息和层级数值在预设的画布上绘制对应的具有标记信息的矩形区域，还包括：

[0028] 在绘制有所述标签信息集合内的所有标签节点对应的矩形区域的画布上的各个连通区域内分别标记与相应连通区域的颜色相匹配的层级数值。

[0029] 相应地，本发明还提供一种网页页面的标签嵌套层级的显示装置，包括：

[0030] DOM对象树读取模块，用于读取当前打开的网页页面的DOM对象树；所述DOM对象树包括所述网页页面的body标签节点的所有子标签节点，以及每一个子标签节点的后代标签节点；

[0031] 属性信息获取模块，用于对所述DOM对象树进行先序遍历，获取遍历到的标签节点的属性信息；

[0032] 层级数值生成模块，用于生成与遍历到的标签节点所在的层级相匹配的层级数值；

[0033] 嵌套层级获取模块，用于将所述属性信息和所述层级数值进行关联，生成标签信息集合；以及，

[0034] 热力图生成模块，用于根据所述标签信息集合生成所述网页页面的标签嵌套层级的热力图，以展示所述网页页面的标签嵌套层级；

[0035] 所述属性信息包括标签节点的尺寸参数和标签节点相对于浏览器窗口左上角的坐标；其中，所述尺寸参数为宽度和长度；

[0036] 所述热力图生成模块具体包括：

[0037] 矩形区域绘制单元，用于提取所述标签信息中所有标签节点的属性信息和层级数值，并根据每个标签节点的属性信息和层级数值在预设的画布上绘制对应的具有标记信息的矩形区域，以得到目标画布；其中，每一个矩形区域的位置和尺寸与一个标签节点的坐标和尺寸参数相对应，每一个矩形区域的标记信息与一个标签节点的层级数值相对应；

[0038] 热力图生成单元，用于根据所述目标画布生成所述网页页面的标签嵌套层级的热力图；以及，

[0039] 嵌套层级展示单元，用于在浏览器窗口中显示所述标签嵌套层级的热力图，以展示所述网页页面的标签嵌套层级。

[0040] 优选地，所述层级数值生成模块具体用于：

[0041] 在首次遍历当前标签节点时，判断当前标签节点是否为所述body标签节点的子标签节点；

[0042] 在当前标签节点是所述body标签节点的子标签节点时，将所述当前标签节点的层级数值配置为1；

[0043] 在当前标签节点不是所述body标签节点的子标签节点时，将当前标签节点的层级数值设置为其父标签节点的层级数值加一后得到的数值。

[0044] 优选地，所述标记信息包括颜色标记信息，且所述颜色标记信息的深度跟所述层级数值成正相关关系；

[0045] 则所述矩形区域绘制单元具体用于：

[0046] 重复以下步骤，直至所述标签信息集合内每一个标签节点的属性信息和层级数值都在所述预设的画布上绘制有一个唯一对应的具有标记信息的矩形区域；

[0047] 提取所述标签信息集合内的当前标签节点的属性信息和层级数值；

[0048] 在预设的画布上绘制一个位置和尺寸分别与当前提取到的标签节点的坐标和尺寸参数相对应的矩形区域；

[0049] 查找与所述当前标签节点的层级数值相匹配的预设的颜色参数；

[0050] 根据查找到的预设的颜色参数设置所述矩形区域的颜色。

[0051] 优选地，所述标记信息还包括数值标记信息；

[0052] 所述矩形区域绘制单元还用于：

[0053] 在绘制有所述标签信息集合内的所有标签节点对应的矩形区域的画布上的各个连通区域内分别标记与相应连通区域的颜色相匹配的层级数值。

[0054] 实施本发明，具有如下有益效果：

[0055] 本发明提供的网页页面的标签嵌套层级的显示方法和装置，通过获取当前网页页面的DOM对象树，并对DOM对象树进行先序遍历，以获得每个标签节点的属性信息及所在的层级相匹配的层级数值，并对该属性信息和层级数值进行关联，生成标签信息集合，以及根据该标签信息集合生成网页页面的标签嵌套层级的热力图，以展示所述网页页面的标签嵌套层级。可见，相比于由人工在网页页面源代码中一层一层的数相应标签所在层级的方式，本发明能够有效地提高获取网页页面中的标签节点的层级数值的效率及准确率，并且能够快捷且直观地显示网页页面的标签嵌套层级，为评估网页页面的质量或修改网页页面的标签嵌套提供了方便。

附图说明

[0056] 图1是本发明提供的网页页面的标签嵌套层级的显示方法的一个实施例的流程示意图；

[0057] 图2是本发明实施例提供的一个DOM对象列表的二叉树模型示意图；

[0058] 图3是本发明实施例提供的一个标签嵌套层级的热力图；

[0059] 图4是本发明提供的网页页面的标签嵌套层级的显示装置的一个实施例的结构示意图。

具体实施方式

[0060] 下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

[0061] 请参阅图1，是本发明提供的网页页面的标签嵌套层级的显示方法的一个实施例的流程示意图。本实施例提供的网页页面的标签嵌套层级的显示方法，至少包括如下步骤：

[0062] S11、读取当前打开的网页页面的DOM对象树；所述DOM对象树包括所述网页页面的body标签节点的所有子标签节点，以及每一个子标签节点的后代标签节点；

[0063] S12、对所述DOM对象树进行先序遍历，获取遍历到的标签节点的属性信息；

[0064] S13、生成与遍历到的标签节点所在的层级相匹配的层级数值；

[0065] S14、将所述属性信息和所述层级数值进行关联，生成标签信息集合；

[0066] S15、根据所述标签信息集合生成所述网页页面的标签嵌套层级的热力图，以展示所述网页页面的标签嵌套层级。

[0067] 需要说明的是，具体实施时，用户开启预置在浏览器中的相应功能插件，处理器通过执行该功能插件来实现上述步骤S11～S15。

[0068] 在本实施例中，功能插件通过浏览器API(Application Programming Interface，应用程序编程接口)获得当前打开的网页页面的DOM(Document Object Model，文档对象模型)对象树。该DOM对象树包括网页页面的body标签节点的所有子标签节点以及每一个子标签节点的后代标签节点，其中，一个子标签节点的后代标签节点指的是该子标签节点下的所有标签节点。优选地，DOM对象树以列表的形式存在，并且，DOM对象列表中的各个标签节点具有相应的层级嵌套关系。例如，一个DOM对象列表的结构如下：

[0069]

[0070]

[0071] 需要说明的是，上文举例中示出标签节点是为了说明标签节点和标签节点均为标签节点的子标签节点，实际获得的DOM对象树中可以包括标签节点，也可以不包括标签节点。

[0072] 在本实施例中，对DOM对象树进行先序递归遍历，同时，维持一个计数器，用以统计标签节点的层级数值。具体地，每遍历到一个标签节点时，获取当前标签节点的属性信息，且生成与该标签节点所在的层级相匹配的层级数值，以及将该标签节点的属性信息和层级数值进行关联并保存至预设的标签信息集合中，直至遍历完DOM对象树中所有的标签节点。优选地，标签信息集合以列表的形式存在，并且，标签信息集合中的数据存储格式可以依照各个标签节点的层级嵌套关系。

[0073] 本实施例提供的网页页面的标签嵌套层级的显示方法，通过获取当前网页页面的DOM对象树，并对DOM对象树进行先序遍历，以获得每个标签节点的属性信息及所在的层级相匹配的层级数值，并对该属性信息和层级数值进行关联，生成标签信息集合，以及根据该标签信息集合生成网页页面的标签嵌套层级的热力图，以展示所述网页页面的标签嵌套层级。可见，相比于由人工在网页页面源代码中一层一层的数相应标签所在层级的方式，本发明能够有效地提高获取网页页面中的标签节点的层级数值的效率及准确率，并且能够快捷且直观地显示网页页面的标签嵌套层级，为评估网页页面的质量或修改网页页面的标签嵌套提供了方便。

[0074] 优选地，所述生成与遍历到的标签节点所在的层级相匹配的层级数值，具体为：

[0075] 在首次遍历当前标签节点时，判断当前标签节点是否为所述body标签节点的子标签节点；

[0076] 若是，则将所述当前标签节点的层级数值配置为1；

[0077] 若否，则将当前标签节点的层级数值设置为其父标签节点的层级数值加一后得到的数值。

[0078] 请参阅图2，为上文举例的DOM对象列表的二叉树模型示意图。接下来，结合上文举例的DOM对象列表，对该DOM对象列表进行先序遍历以及生成相应的层级数值的过程进行详细说明：

[0079] 首先遍历标签节点，判定该标签节点是首次被遍历，且其为body标签节点的子标签节点，因此，将其层级数值配置为1；接着遍历标签节点，判定该标签节点是首次被遍历，且其不是body标签节点的子标签节点，因此，将其层级数值设置为其父标签节点的层级数值加一后得到的数值2，并且，标签节点没有子标签节点，因此，返回其父标签节点，由于标签节点之前被遍历过，因此不改变其层级数值；接着遍历标签节点的另一个子标签节点，判定该标签节点是首次被遍历，且其不是body标签节点的子标签节点，将其层级数值设置为其父标签节点的层级数值加一后得到的数值2；接着遍历标签节点，判定该标签节点是首次被遍历，且其不是body标签节点的子标签节点，将其层级数值设置为其父标签节点的层级数值加一后得到的数值3。随后，遍历标签节点，判定该标签节点是首次被遍历，且其为body标签节点的子标签节点，因此，将该标签节点的层级数值配置为1；最后遍历标签节点，判定该标签节点是首次被遍历，且其不是body标签节点的子标签节点，因此，将其层级数值设置为其父标签节点的层级数值加一后得到的数值2。

[0080] 在一个优选的实施方式中，所述属性信息包括标签节点的尺寸参数和所述标签节点相对于浏览器窗口左上角的坐标；其中，所述尺寸参数为宽度和长度；

[0081] 所述根据所述标签信息集合生成所述网页页面的标签嵌套层级的热力图，以展示所述网页页面的标签嵌套层级，具体包括：

[0082] 提取所述标签信息中所有标签节点的属性信息和层级数值，并根据每个标签节点的属性信息和层级数值在预设的画布上绘制对应的具有标记信息的矩形区域，以得到目标画布；

[0083] 根据所述目标画布生成所述网页页面的标签嵌套层级的热力图；

[0084] 在浏览器窗口中显示所述标签嵌套层级的热力图，以展示所述网页页面的标签嵌套层级。

[0085] 进一步地，所述标记信息包括颜色标记信息，且所述颜色标记信息的深度跟所述层级数值成正相关关系；

[0086] 则所述提取所述标签信息中所有标签节点的属性信息和层级数值，并根据每个标签节点的属性信息和层级数值在预设的画布上绘制对应的具有标记信息的矩形区域，具体包括：

[0087] 重复以下步骤，直至所述标签信息集合内每一个标签节点的属性信息和层级数值都在所述预设的画布上绘制有一个唯一对应的具有颜色标记信息的矩形区域：

[0088] 提取所述标签信息集合内的当前标签节点的属性信息和层级数值；

[0089] 在预设的画布上绘制一个位置和尺寸分别与所述当前标签节点的坐标和尺寸参数相对应的矩形区域；

[0090] 查找与所述当前标签节点的层级数值相匹配的预设的颜色参数；

[0091] 根据查找到的预设的颜色参数设置所述矩形区域的颜色。

[0092] 更进一步地，所述标记信息还包括数值标记信息；

[0093] 所述提取所述标签信息中所有标签节点的属性信息和层级数值，并根据每个标签节点的属性信息和层级数值在预设的画布上绘制对应的具有标记信息的矩形区域，还包括：

[0094] 在绘制有所述标签信息集合内的所有标签节点对应的矩形区域的画布上的各个连通区域内分别标记与相应连通区域的颜色相匹配的层级数值。

[0095] 在本实施方式中，属性信息包括标签节点的尺寸参数(即该标签节点在网页页面上对应的矩形显示区域的长度L和宽度W)以及该标签节点相对于浏览器窗口左上角的坐标。需要说明的是，获取尺寸参数和坐标的方式为现有技术，此处不加赘述。

[0096] 另外，针对上文举例的DOM对象列表，若标签节点的尺寸参数和坐标分别为X1、Y1、W1和L1，标签节点的尺寸参数和坐标分别为X2、Y2、W2和L2，依次类推，标签节点的尺寸参数和坐标分别为X6、Y6、W6和L6，则遍历完成后，生成的标签信息集合如下：

[0097]

[0098]

[0099] 在本实施方式中，在生成标签信息集合之后，在网页页面中生成一个隐藏的canvas元素，即预设的画布；再依次提取标签信息中所有标签节点的属性信息和层级数值，每提取到一个标签节点的尺寸参数和坐标，就将其发送至浏览器的FillRect接口，以在预设的画布上绘制一个位置和尺寸分别与当前提取到的标签节点的坐标和尺寸参数相对应的矩形区域，并且，查找与当前提取到标签节点的层级数值相匹配的预设的颜色参数，如颜色深度值和透明度，优选地，标签的层级数值越大，其对应的颜色越深，进而，根据查找到的颜色参数设置当前矩形区域的颜色。直至提取完标签信息集合内的所有标签节点的属性信息和层级数值后，得到目标画布。

[0100] 请参阅图3，为根据上文举例的DOM对象列表绘制的标签嵌套层级的热力图。需要说明的是，在绘制完所述标签信息集合内的所有标签节点对应的矩形区域后，在目标画布上，标签信息集合内的每个标签节点的属性信息和层级数值都绘制有一个与之唯一匹配的具有标记信息的矩形区域，并且，所述标签信息集合中的每一个标签节点对应的矩形区域均包含其后代标签节点所对应的矩形区域，因此，目标画布上呈现有若干个相互交叠的矩形区域。其中，标记信息包括颜色标记信息，标签节点的层级数值越大，其对应的颜色越深，换言之，目标画布上矩形区域重叠越多的区域，其颜色就越深，意味着该区域的标签嵌套层级越深。另外，所述标记信息还包括数值标记信息，绘制完所述标签信息集合内的所有标签节点对应的矩形区域后，多个矩形区域相互交叠，因而存在相应的连通区域，例如一个父标签节点对应的大矩形区域和其子标签节点对应的小矩形区域交叠形成的“回”形图案，两个矩形区域的边框围成的区域和内部较小的矩形区域分别为两个连通区域，因此，可以在各个连通区域内分别标记与相应连通区域的颜色相匹配的层级数值，以此让用户能够更加直接的获知网页页面的相应区域所对应的标签嵌套层级的数值。

[0101] 在本实施方式中，根据目标画布生成网页页面的标签嵌套层级的热力图具体为，通过canvas的toDataUrl接口，将canvas上绘制的图像转化为base64编码格式的字符串，以生成网页页面的标签嵌套层级的热力图，进而，在浏览器中新建一个窗口来打开该标签嵌套层级的热力图，以展示所述网页页面的标签的嵌套层级。本实施方式可以方便快捷地生成嵌套层级的热力图，用户能够通过热力图上区域颜色的深浅直观地判断网页页面的标签嵌套层级情况，以及直接获知网页页面的相应区域的标签嵌套层级的数值，有效地提高了工作效率。

[0102] 在另一个优选的实施方式中，所述属性信息包括所述标签节点的身份ID；

[0103] 在所述将所述属性信息和所述层级数值进行关联，生成标签信息集合之后，还包括：

[0104] 当检测到所述网页页面中的某个像素点被选定时，获取被选定的像素点所对应的标签节点的身份ID；

[0105] 根据获取到的身份ID在所述标签信息集合中查找与所述获取到的身份ID相关联的层级数值；

[0106] 显示查找到的层级数值。

[0107] 在本实施方式中，属性信息包括标签节点的身份ID。针对上文举例的DOM对象列表，遍历完成后，生成的标签信息集合如下：

[0108]

[0109] 需要说明的是，DOM对象树中的每个标签节点在网页页面上均对应有一个显示区域。在本实施方式中，当用户对网页页面中的某个像素点进行相应的选定操作时，例如通过鼠标指针点击网页页面上的某个像素点，处理器则通过功能插件获取被点击的像素点所对应的标签节点的身份ID，并根据获取到的身份ID在标签信息集合中查找与获取到的身份ID相关联的层级数值，进而显示查找到的层级数值，需要说明的是，一个像素点可能对应有多个标签节点，获取的应是其中层级数值最大的标签节点。例如，用户点击某个像素点，处理器获得其对应的标签节点的层级数值为5，则在网页页面上弹出一个具有层级数值5的提示框，以显示查找到的层级数值。本实施方式能够根据用户需求灵活地查找特定标签节点的层级数值，有效地提高了工作效率及用户体验。

[0110] 相应的，本发明实施例还提供一种网页页面的标签嵌套层级的显示装置，能够实现本发明实施例提供的网页页面的标签嵌套层级的显示方法中的所有流程。

[0111] 请参阅图4，是本发明提供的网页页面的标签嵌套层级的显示装置一个实施例的结构示意图。本发明实施例提供的网页页面的标签嵌套层级的显示装置包括：

[0112] DOM对象树读取模块11，用于读取当前打开的网页页面的DOM对象树；所述DOM对象树包括所述网页页面的body标签节点的所有子标签节点，以及每一个子标签节点的后代标签节点；

[0113] 属性信息获取模块12，用于对所述DOM对象树进行先序遍历，获取遍历到的标签节点的属性信息；

[0114] 层级数值生成模块13，用于生成与遍历到的标签节点所在的层级相匹配的层级数值；

[0115] 嵌套层级获取模块14，用于将所述属性信息和所述层级数值进行关联，生成标签信息集合；以及，

[0116] 热力图生成模块15，用于根据所述标签信息集合生成所述网页页面的标签嵌套层级的热力图，以展示所述网页页面的标签嵌套层级。

[0117] 本发明提供的网页页面的标签嵌套层级的显示装置，通过获取当前网页页面的DOM对象树，并对DOM对象树进行先序遍历，以获得每个标签节点的属性信息及所在的层级相匹配的层级数值，并对该属性信息和层级数值进行关联，生成标签信息集合，以及根据该标签信息集合生成网页页面的标签嵌套层级的热力图，以展示所述网页页面的标签嵌套层级。可见，相比于由人工在网页页面源代码中一层一层的数相应标签所在层级的方式，本发明能够有效地提高获取网页页面中的标签节点的层级数值的效率及准确率，并且能够快捷且直观地显示网页页面的标签嵌套层级，为评估网页页面的质量或修改网页页面的标签嵌套提供了方便。

[0118] 优选地，所述层级数值生成模块13具体用于：

[0119] 在首次遍历当前标签节点时，判断当前标签节点是否为所述body标签节点的子标签节点；

[0120] 在当前标签节点是所述body标签节点的子标签节点时，将所述当前标签节点的层级数值配置为1；

[0121] 在当前标签节点不是所述body标签节点的子标签节点时，将当前标签节点的层级数值设置为其父标签节点的层级数值加一后得到的数值。

[0122] 在一个优选的实施方式中，所述属性信息包括标签节点的尺寸参数和标签节点相对于浏览器窗口左上角的坐标；其中，所述尺寸参数为宽度和长度；

[0123] 所述热力图生成模块15具体包括：

[0124] 矩形区域绘制单元，用于提取所述标签信息中所有标签节点的属性信息和层级数值，并根据每个标签节点的属性信息和层级数值在预设的画布上绘制对应的具有标记信息的矩形区域，以得到目标画布；

[0125] 热力图生成单元，用于根据所述目标画布生成所述网页页面的标签嵌套层级的热力图；以及，

[0126] 嵌套层级展示单元，用于在浏览器窗口中显示所述标签嵌套层级的热力图，以展示所述网页页面的标签嵌套层级。

[0127] 进一步地，所述标记信息包括颜色标记信息，且所述颜色标记信息的深度跟所述层级数值成正相关关系；

[0128] 则所述矩形区域绘制单元具体用于：

[0129] 重复以下步骤，直至所述标签信息集合内每一个标签节点的属性信息和层级数值都在所述预设的画布上绘制有一个唯一对应的具有标记信息的矩形区域；

[0130] 提取所述标签信息集合内的当前标签节点的属性信息和层级数值；

[0131] 在预设的画布上绘制一个位置和尺寸分别与当前提取到的标签节点的坐标和尺寸参数相对应的矩形区域；

[0132] 查找与所述当前标签节点的层级数值相匹配的预设的颜色参数；

[0133] 根据查找到的预设的颜色参数设置所述矩形区域的颜色。

[0134] 更进一步地，所述标记信息还包括数值标记信息；

[0135] 所述矩形区域绘制单元还用于：

[0136] 在绘制有所述标签信息集合内的所有标签节点对应的矩形区域的画布上的各个连通区域内分别标记与相应连通区域的颜色相匹配的层级数值。

[0137] 在一个优选的实施方式中，所述属性信息包括所述标签节点的身份ID；

[0138] 所述显示装置还包括：

[0139] 身份ID获取模块，用于当检测到所述网页页面中的某个像素点被选定时，获取所述被选中的像素点所对应的标签节点的身份ID；

[0140] 层级数值查找模块，用于根据获取到的身份ID在所述标签信息集合中查找与所述获取到的身份ID相关联的层级数值；以及，

[0141] 层级数值显示模块，用于显示查找到的层级数值。

[0142] 本发明提供的网页页面的标签嵌套层级的显示方法和装置，通过获取当前网页页面的DOM对象树，并对DOM对象树进行先序遍历，以获得每个标签节点的属性信息及所在的层级相匹配的层级数值，并对该属性信息和层级数值进行关联，生成标签信息集合，以及根据该标签信息集合生成网页页面的标签嵌套层级的热力图，以展示所述网页页面的标签嵌套层级。可见，相比于由人工在网页页面源代码中一层一层的数相应标签所在层级的方式，本发明能够有效地提高获取网页页面中的标签节点的层级数值的效率及准确率，并且能够快捷且直观地显示网页页面的标签嵌套层级，为评估网页页面的质量或修改网页页面的标签嵌套提供了方便。

[0143] 以上所述是本发明的优选实施方式，应当指出，对于本技术领域的普通技术人员来说，在不脱离本发明原理的前提下，还可以做出若干改进和变形，这些改进和变形也视为本发明的保护范围。

[0144] 本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，所述的程序可存储于一计算机可读取存储介质中，该程序在执行时，可包括如上述各方法的实施例的流程。其中，所述的存储介质可为磁碟、光盘、只读存储记忆体(Read-Only Memory，ROM)或随机存储记忆体(Random Access Memory，RAM)等。