CN107644034A

CN107644034A - 基于dom树结构的动态展示点击图的方法、装置及系统

Info

Publication number: CN107644034A
Application number: CN201610580402.2A
Authority: CN
Inventors: 王科; 孙明; 符迪
Original assignee: Beijing Jingdong Century Trading Co Ltd; Beijing Jingdong Shangke Information Technology Co Ltd
Current assignee: Beijing Jingdong Century Trading Co Ltd; Beijing Jingdong Shangke Information Technology Co Ltd
Priority date: 2016-07-22
Filing date: 2016-07-22
Publication date: 2018-01-30

Abstract

本发明提供一种基于DOM树结构的动态展示点击图的方法、装置及系统，能够解决页面点击图中隐藏链接过滤需要重新编码，轮播图、级联菜单、广告浮层等动态展示需要定制开发、重新部署，维护成本高等问题。该方法包括：获取数据库中记录的网页中链接的坐标及点击量数据；根据链接的坐标匹配点击图中的目标链接；将链接的点击量数据添加到<div>层，并将所述<div>层放置于目标链接的<a>标签结构中；输出点击图展示结果。

Description

基于DOM树结构的动态展示点击图的方法、装置及系统

技术领域

本发明涉及计算机技术及软件领域，尤其涉及一种基于DOM树结构的动态展示点击图的方法、装置及系统。

背景技术

目前展示页面点击图的技术中，主流的做法是通过首先识别数据库中记录的采集到的链接点击流量数据，然后再基于链接的坐标，在上面添加一个浮层用于展示该链接被点击的次数，例如在html中<a>标签的上层加一个<div>层，<div>层中加点击的数字在页面段进行展示。

在应用上述技术进行点击图展示的过程中：

1)当网页有链接隐藏时，点击图中会展示相关链接的点击量，则这些展示会对网页中显示的链接的展示造成重叠、干扰等影响。此时通常需修改网页，把隐藏的多余的链接删除然后重新新发布系统；

2)当出现级联菜单、复杂轮播图等动态的网页元素时，则需要分析网页结构，然后基于网页结构元素唯一标识进行专项绑定点击量数据。

但这种展示点击图的方法仍然存在一定的缺陷：

1)如果网页中某些链接被隐藏但是未被删除，点击图中会展示相关链接的点击量，用户会看到没有价值的统计且会对现有的展示数据产生重叠、干扰等影响。

2)如果出现级联菜单、轮播图等动态的网页元素，往往不能支持灵活的动态扩展需要写定制化的代码，再重新部署。

发明内容

有鉴于此，本发明提供一种基于DOM树结构的动态展示点击图的方法、装置及系统，能够解决页面点击图中隐藏链接过滤需要重新编码，轮播图、级联菜单、广告浮层等动态展示需要定制开发、重新部署，维护成本高等问题。

为实现上述目的，根据本发明的一个方面，提供了一种基于DOM树结构的动态展示点击图的方法。

本发明的一种基于DOM树结构的动态展示点击图的方法包括：获取数据库中记录的网页中链接的坐标及点击量数据；根据链接的坐标匹配点击图中的目标链接；将链接的点击量数据添加到<div>层，并将所述<div>层放置于目标链接的<a>标签结构中；输出点击图展示结果。

可选地，所述目标链接为页面中所有链接中的一个或多个，包括：显示在页面中的链接、隐藏于页面中的链接、位于级联菜单、轮播图、浮动广告中的链接。

为实现上述目的，根据本发明的另一方面，提供了一种基于DOM树结构的动态展示点击图的装置。

本发明的一种基于DOM树结构的动态展示点击图的装置包括：获取模块，用于获取数据库中记录的网页中链接的坐标及点击量数据；匹配模块，用于根据链接的坐标匹配点击图中的目标链接；绑定模块，用于将链接的点击量数据添加到<div>层，并将所述<div>层放置于目标链接的<a>标签结构中；输出模块，用于输出点击图展示结果。

可选地，所述匹配模块中，目标链接为页面中所有链接中的一个或多个，包括：显示在页面中的链接、隐藏于页面中的链接、位于级联菜单、轮播图、浮动广告中的链接。

为实现上述目的，根据本发明的另一方面，提供了一种基于DOM树结构的动态展示点击图的系统。

本发明的一种基于DOM树结构的动态展示点击图的系统包括：存储器和处理器，其中：所述存储器存储指令；所述处理器被配置为根据所述指令执行以下步骤：获取数据库中记录的网页中链接的坐标及点击量数据；根据链接的坐标匹配点击图中的目标链接；将链接的点击量数据添加到<div>层，并将所述<div>层放置于目标链接的<a>标签结构中；输出点击图展示结果。

可选地，所述处理器进一步被配置为还用于：所述目标链接为页面中所有链接中的一个或多个，包括：显示在页面中的链接、隐藏于页面中的链接、位于级联菜单、轮播图、浮动广告中的链接。

根据本发明的技术方案，通过将链接的点击量数据添加到<div>层，并将<div>层的数据绑定到<a>标签中，从而可以在页面点击图展示过程中实现所见即所得的效果，在网页端看到的任何链接的点击量数据可以无偏差正常展示；且可以解决不规则轮播图的点击量数据错位展示问题；可以支持级联菜单、广告等动态浮层点击数量的统计；可以解决隐藏链接点击数量统计展示的问题；此外，网页改版无需重新开发及部署，自动匹配支持。

附图说明

附图用于更好地理解本发明，不构成对本发明的不当限定。其中：

图1是根据本发明实施例的基于DOM树结构的动态展示点击图的方法的主要步骤的示意图；

图2是根据本发明实施例的基于DOM树结构的动态展示点击图的方法的实现原理的示意图；

图3是根据本发明实施例的基于DOM树结构的动态展示点击图的装置的主要模块的示意图；

图4是根据本发明实施例的基于DOM树结构的动态展示点击图的系统的主要部分的示意图。

具体实施方式

以下结合附图对本发明的示范性实施例做出说明，其中包括本发明实施例的各种细节以助于理解，应当将它们认为仅仅是示范性的。因此，本领域普通技术人员应当认识到，可以对这里描述的实施例做出各种改变和修改，而不会背离本发明的范围和精神。同样，为了清楚和简明，以下的描述中省略了对公知功能和结构的描述。

图1是根据本发明实施例的基于DOM树结构的动态展示点击图的方法的主要步骤的示意图。

如图1所示，本发明实施例的基于DOM树结构的动态展示点击图的方法主要包括如下步骤：

步骤S11：获取数据库中记录的网页中链接的坐标及点击量数据。

步骤S12：根据链接的坐标匹配点击图中的目标链接。

步骤S13：将链接的点击量数据添加到<div>层，并将所述<div>层放置于目标链接的<a>标签结构中。

步骤S14：输出点击图展示结果。

DOM是以层次结构组织的节点或信息片断的集合。这个层次结构允许开发人员在树中导航寻找特定信息。分析该结构通常需要加载整个文档和构造层次结构，然后才能做任何工作。由于它是基于信息层次的，因而DOM被认为是基于树或基于对象的。HTML DOM定义了访问和操作HTML文档的标准方法。HTML DOM把HTML文档呈现为带有元素、属性和文本的树结构(节点树)。

本发明实施例中，基于DOM树结构进行点击图的动态展示。HTML(即HyperTextMarkup Language)超文本标记语言，标准通用标记语言下的一个应用。“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。

HTML<div>元素是块级元素，它是可用于组合其他HTML元素的容器。<div>元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。如果与CSS一同使用，<div>元素可用于对大的内容块设置样式属性。<div>元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。HTML<a>标签定义超链接，用于从一张页面链接到另一张页面。<a>元素最重要的属性是href属性，它指示链接的目标。

本发明实施例中，将网页中链接的点击量数据写入<div>层，然后将<div>层的放置在<a>标签中，即将<div>层放入<a>标签是完成了<a>标签对<div>层的包裹，即<div>层和<a>标签的绑定，<div>层的节点作为<a>节点的子节点。这样<div>层中的设置将会直接影响<a>标签的展示效果，并伴随<a>标签进行动态展示。

在实现网页点击量数据的展示过程中，具体而言可通过如下步骤进行设置：

1)网页页面点击图加载；

2)从数据库获取链接点击数据及坐标位置；

3)根据获取的链接坐标位置和页面链接进行匹配；

4)将获取链接的数据放入<div>层，如<div>点击量：11</div>；

5)将该<div>层放入匹配的链接的<a>标签里，形成<a><div>点击量：11</div></a>的结构；

6)完成页面加载，绘制出页面点击图，无需研发及运维人员的二次介入。具体实现原理可参见图2。

根据本发明实施例的基于DOM树结构的动态展示点击图的方法可以看出，通过将链接的点击量数据添加到<div>层，并将<div>层的数据绑定到<a>标签中，从而可以在页面点击图展示过程中实现所见即所得的效果，在网页端看到的任何链接的点击量数据可以无偏差正常展示；且可以解决不规则轮播图的点击量数据错位展示问题；可以支持级联菜单、广告等动态浮层点击数量的统计；可以解决隐藏链接点击数量统计展示的问题；此外，网页改版无需重新开发及部署，自动匹配支持。

图3是根据本发明实施例的基于DOM树结构的动态展示点击图的装置的主要模块的示意图。

如图3所示，本发明实施例的基于DOM树结构的动态展示点击图的装置30主要包括如下模块：获取模块301、匹配模块302、绑定模块303以及输出模块304，其中：

获取模块301用于获取数据库中记录的网页中链接的坐标及点击量数据；匹配模块302用于根据链接的坐标匹配点击图中的目标链接；绑定模块303用于将链接的点击量数据添加到<div>层，并将所述<div>层放置于目标链接的<a>标签结构中；输出模块304用于输出点击图展示结果。

其中，匹配模块302中，目标链接可以为页面中所有链接中的一个或多个，包括：显示在页面中的链接、隐藏于页面中的链接、位于级联菜单、轮播图、浮动广告中的链接。

如图4所示，本发明实施例的基于DOM树结构的动态展示点击图的系统40主要包括如下部分：存储器401以及处理器402，其中：

存储器401存储指令；

处理器402被配置为根据所述指令执行以下步骤：

获取数据库中记录的网页中链接的坐标及点击量数据；

根据链接的坐标匹配点击图中的目标链接；

将链接的点击量数据添加到<div>层，并将所述<div>层放置于目标链接的<a>标签结构中；

输出点击图展示结果。

此外，处理器402进一步被配置为还可用于：所述目标链接可为页面中所有链接中的一个或多个，包括：显示在页面中的链接、隐藏于页面中的链接、位于级联菜单、轮播图、浮动广告中的链接。

从以上描述可以看出，通过将链接的点击量数据添加到<div>层，并将<div>层的数据绑定到<a>标签中，从而可以在页面点击图展示过程中实现所见即所得的效果，在网页端看到的任何链接的点击量数据可以无偏差正常展示；且可以解决不规则轮播图的点击量数据错位展示问题；可以支持级联菜单、广告等动态浮层点击数量的统计；可以解决隐藏链接点击数量统计展示的问题；此外，网页改版无需重新开发及部署，自动匹配支持。

上述具体实施方式，并不构成对本发明保护范围的限制。本领域技术人员应该明白的是，取决于设计要求和其他因素，可以发生各种各样的修改、组合、子组合和替代。任何在本发明的精神和原则之内所作的修改、等同替换和改进等，均应包含在本发明保护范围之内。

Claims

1.一种基于DOM树结构的动态展示点击图的方法，其特征在于，包括：

获取数据库中记录的网页中链接的坐标及点击量数据；

根据链接的坐标匹配点击图中的目标链接；

输出点击图展示结果。

2.根据权利要求1所述的方法，其特征在于，所述目标链接为页面中所有链接中的一个或多个，包括：显示在页面中的链接、隐藏于页面中的链接、位于级联菜单、轮播图、浮动广告中的链接。

3.一种基于DOM树结构的动态展示点击图的装置，其特征在于，包括：

获取模块，用于获取数据库中记录的网页中链接的坐标及点击量数据；

匹配模块，用于根据链接的坐标匹配点击图中的目标链接；

绑定模块，用于将链接的点击量数据添加到<div>层，并将所述<div>层放置于目标链接的<a>标签结构中；

输出模块，用于输出点击图展示结果。

4.根据权利要求3所述的装置，其特征在于，所述匹配模块中，目标链接为页面中所有链接中的一个或多个，包括：显示在页面中的链接、隐藏于页面中的链接、位于级联菜单、轮播图、浮动广告中的链接。

5.一种基于DOM树结构的动态展示点击图的系统，其特征在于，包括：

存储器和处理器，其中：

所述存储器存储指令；

所述处理器被配置为根据所述指令执行以下步骤：

获取数据库中记录的网页中链接的坐标及点击量数据；

根据链接的坐标匹配点击图中的目标链接；

输出点击图展示结果。

6.根据权利要求5所述的系统，其特征在于，所述处理器进一步被配置为还用于：所述目标链接为页面中所有链接中的一个或多个，包括：显示在页面中的链接、隐藏于页面中的链接、位于级联菜单、轮播图、浮动广告中的链接。