CN108446136B - 一种元素代码的提取方法及系统 - Google Patents

Abstract

本发明公开了一种元素代码的提取方法，包括获取目标网站的文档对象模型中的待提取元素；解析所述待提取元素中包含的目标元数据；对所述目标元数据依据预设的样式去重处理算法进行样式去重处理，得到目标样式数据；将所述目标样式数据转换成可提取的目标代码，对所述目标代码进行提取。上述的方法，在获取到所述目标元素的目标元数据以后，对所述目标元数据进行了样式去重处理，避免了现有的一键提取元素代码的过程中，没有对提取过程进行处理，导致样式仍然存在不少冗余、缺漏、值不准确的问题，无法作为二次开发的基础代码的问题。

Description

一种元素代码的提取方法及系统

技术领域

本发明涉及Web前端技术领域，尤其涉及一种元素代码的提取方法及系统。

背景技术

前端页面元素是由前端工程师结合用户视觉交互设计和程序设计，使用多种计算机语言(包括但不限于HTML、CSS、JavaScript)编写和编译，最终展现和运行于浏览器上的文档的一部分。可以认为，HTML决定元素的结构，CSS决定元素的外观，JS在元素加载后进行有选择的控制。因此，CSS开发是元素开发前期的主要工作。由于层叠样式表的复杂性以及一些工程化的因素，元素的样式极容易产生复杂的交叉影响，随着代码的重构和工程的迭代，元素的源代码的复用难度不断增加，很大程度上减缓了软件工程开发的进度。为了实现元素的高可复用性，以Chrome浏览器开发者工具扩展的形式SnappySnippet，实现了一键提取所选元素的元素代码。

发明人对元素代码的提取过程进行研究发现，SnappySnippet提取元素代码的过程是一键提取的，没有对提取过程进行处理，因此，样式仍然存在不少冗余、缺漏、值不准确的问题，无法作为二次开发的基础代码。

发明内容

有鉴于此，本发明提供了一种元素代码的提取方法，用以解决现有技术中提取元素代码的过程是一键提取的，没有对提取过程进行处理，因此，样式仍然存在不少冗余、缺漏、值不准确的问题，无法作为二次开发的基础代码的问题。具体方案如下：

一种元素代码的提取方法，包括：

获取目标网站的文档对象模型中的待提取元素；

解析所述待提取元素中包含的目标元数据；

对所述目标元数据依据预设的样式去重处理算法进行样式去重处理，得到目标样式数据；

将所述目标样式数据转换成可提取的目标代码，对所述目标代码进行提取。

上述的方法，可选的，解析所述待提取元素中包含的目标元数据包括：

获取所述目标元素中包含的各个节点和其对应的标签属性数据集和样式表数据集；

将所述标签属性数据集和所述样式表数据集中数据与预设的必要属性和样式数据库中的各个必要数据进行比对；

将所述标签属性数据集中和所述样式表数据集中不存在于所述预设的必要属性和样式数据库中的数据删除，得到第一标签属性数据集和第一样式表数据集，其中，所述第一标签属性数据集和所述第一样式表数据集组成所述待提取元素中包含的目标元数据。

上述的方法，可选的，对所述目标元数据依据预设的样式去重处理算法进行样式去重处理包括：

将所述目标元数据中包含的默认样式数据进行过滤，得到第一目标样式数据；

对所述第一目标元数据中与网页开发者定义的样式属性值的不同的样式属性值还原，得到第二目标样式数据；

对与所述第二目标样式数据进行统计、抽取得到公共样式数据；

将所述公共样式数据与所述第二目标样式数据进行整合，得到目标样式数据。

上述的方法，可选的，还包括：

判断所述待提取元素中是否包含伪元素；

若是，获取所述伪元素的第一样式数据，将所述第一样式数据存储到所述目标样式数据中。

上述的方法，可选的，还包括：

判断所述待提取元素中是否存在外链文件；

若是，解析所述外链文件对应的第二样式数据，将所述第二样式数据存储到所述目标样式数据中。

一种元素代码的提取系统，包括：

获取模块，用于获取目标网站的文档对象模型中的待提取元素；

解析模块，用于解析所述待提取元素中包含的目标元数据；

去重模块，用于对所述目标元数据依据预设的样式去重处理算法进行样式去重处理，得到目标样式数据；

转换模块，用于将所述目标样式数据转换成可提取的目标代码，对所述目标代码进行提取。

上述的系统，可选的，所述解析模块包括：

获取单元，用于获取所述目标元素中包含的各个节点和其对应的标签属性数据集和样式表数据集；

比对单元，用于将所述标签属性数据集和所述样式表数据集中数据与预设的必要属性和样式数据库中的各个必要数据进行比对；

删除单元，用于将所述标签属性数据集中和所述样式表数据集中不存在于所述预设的必要属性和样式数据库中的数据删除，得到第一标签属性数据集和第一样式表数据集，其中，所述第一标签属性数据集和所述第一计样式表数据集组成所述待提取元素中包含的目标元数据。

上述的系统，可选的，所述去重模块包括：

过滤单元，用于将所述目标元数据中包含的默认样式数据进行过滤，得到第一目标样式数据；

还原单元，用于对所述第一目标元数据中与网页开发者定义的样式属性值的不同的样式属性值还原，得到第二目标样式数据；

抽取单元，用于对与所述第二目标样式数据进行统计、抽取得到公共样式数据；

整合单元，用于将所述公共样式数据与所述第二目标样式数据进行整合，得到目标样式数据。

上述的系统，可选的，还包括：

第一判断模块，用于判断所述待提取元素中是否包含伪元素；

第一存储模块，用于若是，获取所述伪元素的第一样式数据，将所述第一样式数据存储到所述目标样式数据中。

上述的系统，可选的，还包括：

第二判断模块，用于判断所述待提取元素中是否存在外链文件；

第二存储模块，用于若是，解析所述外链文件对应的第二样式数据，将所述第二样式数据存储到所述目标样式数据中。

与现有技术相比，本发明包括以下优点：

本发明公开了一种元素代码的提取方法，包括获取目标网站的文档对象模型中的待提取元素；解析所述待提取元素中包含的目标元数据；对所述目标元数据依据预设的样式去重处理算法进行样式去重处理，得到目标样式数据；将所述目标样式数据转换成可提取的目标代码，对所述目标代码进行提取。上述的方法，在获取到所述目标元素的目标元数据以后，对所述目标元数据进行了样式去重处理，避免了现有的一键提取元素代码的过程中，没有对提取过程进行处理，导致样式仍然存在不少冗余、缺漏、值不准确的问题，无法作为二次开发的基础代码的问题。

附图说明

为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1为本申请实施例公开的一种元素代码的提取方法流程图；

图2为本申请实施例公开的一种元素代码的提取方法又一方法流程图；

图3为本申请实施例公开的一种元素代码的提取方法又一方法流程图；

图4为本申请实施例公开的一种元素代码的提取方法示意图；

图5为本申请实施例公开的一种元素代码的提取系统结构框图。

具体实施方式

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

对所公开的实施例的上述说明，使本领域专业技术人员能够实现或使用本发明。对这些实施例的多种修改对本领域的专业技术人员来说将是显而易见的，本文中所定义的一般原理可以在不脱离本发明的精神或范围的情况下，在其它实施例中实现。因此，本发明将不会被限制于本文所示的这些实施例，而是要符合与本文所公开的原理和新颖特点相一致的最宽的范围。

本发明公开了一种元素代码的提取方法，本发明实施例中，所述元素特指HTML元素，其中，所述元素包含至少一个节点。所述方法应用于Web前端领域中对应元素的元素代码的提取过程中，所述Web前端是以网站前台为核心的技术，控制网站在浏览器端的展现和运行逻辑，产生和管理在用户浏览器端运行的所有资源文件，如HTML文档文件、CSS层叠样式表文件、JavaScript脚本文件等。所述方法的执行主体为包含所述提取方法的处理器或者控制器、解析器等，所述提取方法应用在浏览器端。所述提取方法的执行流程如图1所示，包括步骤：

S101、获取目标网站的文档对象模型中的待提取元素；

本发明实施例中，所述目标网站为当前正在进行所述待提取元素的元素代码提取的网站，其中，每一个网站的Web前端页面中都对应一个文档对象模型(Document ObjectModel)DOM，所述DOM由W3C规范组织定义、浏览器实现的HTML/XML文档的编程接口对象，从整个HTML文档到一个元素属性都是DOM树中的对象，通常用于指代对应的元素。其中，所述待提取元素在所述DOM树中提取

S102、解析所述待提取元素中包含的目标元数据；

本发明实施例中，解析所述待提取元素，获取所述待提取元素中的目标元数据，所述目标元数据中包含有所述待提取元素中各个节点的必要属性数据和样式数据。

S103、对所述目标元数据依据预设的样式去重处理算法进行样式去重处理，得到目标样式数据；

本发明实施例中，所述目标元数据中还可能会包含默认样式、隐藏样式和与所述待提取元素同类元素冗余的样式的识别，采用所述预设的样式去重处理算法进行样式去重处理，得到目标样式数据。

S104、将所述目标样式数据转换成可提取的目标代码，对所述目标代码进行提取。

本发明实施例中，依据所述目标样式数据，将所述待提取元素转换成对应的目标代码，优选的，所述目标代码采用HTML/CSS/SASS代码进行编写。

本发明公开了一种元素代码的提取方法，包括获取目标网站的文档对象模型中的待提取元素；解析所述待提取元素中包含的目标元数据；对所述目标元数据依据预设的样式去重处理算法进行样式去重处理，得到目标样式数据；将所述目标样式数据转换成可提取的目标代码，对所述目标代码进行提取。上述的方法，在获取到所述目标元素的目标元数据以后，对所述目标元数据进行了样式去重处理，避免了现有的一键提取元素代码的过程中，没有对提取过程进行处理，导致样式仍然存在不少冗余、缺漏、值不准确的问题，无法作为二次开发的基础代码的问题。

本发明实施例中，所述待提取元素中还包括目标结构数据，所述目标结构数据指所述待提取元素的DOM树，所述DOM树，以目标元素为根节点，执行递归访问，本质上是一次深度优先遍历。在访问标签和属性时，方案设计了黑白名单机制，定义需要忽略的规则和需要保留的规则，以此提高元数据质量。例如，对于注释和脚本，由于元素结构和样式不受影响，会选择将其过滤。例如，根据节点类型的不同，会选择性地保留标签属性，将HTML标准之外的属性过滤。特别地，SVG元素并不属于HTML元素，但同样具备DOM接口，且往往是影响页面展现的重要元素。对SVG元素做了兼容处理，支持SVG标签的解析。

本发明实施例中，解析所述待提取元素中包含的目标元数据的执行流程如图2所示，包括步骤：

S201、获取所述目标元素中包含的各个节点和其对应的标签属性数据集和样式表数据集；

本发明实施例中，所述DOM树是浏览器实现的HTML/XML文档的编程接口，也是存在于内存中的中间数据。从DOM树中解析出页面文档的必要数据是简化文档静态内容的必要步骤。以目标元素为根节点的DOM树，访问每个节点解析其标签属性和计算样式，对节点的子节点执行递归访问，最终解析得到与DOM树同构的一个JavaScript对象，获取所述JavaScript对象中所述待提取元素的标签属性数据集和样式表数据集，其中，所述标签属性数据集中包含所述待提取元素的结构数据。

S202、将所述标签属性数据集和所述样式表数据集中数据与预设的必要属性和样式数据库中的各个必要数据进行比对；

本发明实施例中，预先为每一个不同类型的元素设置一个必要属性和样式数据库，所述必要属性和样式数据表中存储有构成所述目标元数据的必要的属性和样式的数据集。

S203、将所述标签属性数据集中和所述样式表数据集中不存在于所述预设的必要属性和样式数据库中的数据删除，得到第一标签属性数据集和第一样式表数据集，其中，所述第一标签属性数据集和所述第一计样式表数据集组成所述待提取元素中包含的目标元数据。

本发明实施例中，所述元素的提取方法还包括：判断所述待提取元素中是否包含伪元素；其中，伪元素主要是：before和:after元素。伪元素可被视做特殊节点，寄生于一般的元素中，可以有独立的样式规则。识别元素的伪元素样式，并作为节点元数据的组成部分。若是，获取所述伪元素的第一样式数据，将所述第一样式数据存储到所述目标样式数据中。

本发明实施例中，所述元素的提取方法，还包括：

判断所述待提取元素中是否存在外链文件；若是，解析所述外链文件对应的第二样式数据，将所述第二样式数据存储到所述目标样式数据中。

其中，优选的，当所述外链文件为自定义字体时，通过层叠样式表CSS3的@font-face模块自定义字体，所述@font-face模块自定义字体是现代前端常用的技术，可用于个性化的字体、图标展示。这部分CSS规则不存在于任何元素的样式规则中，而是定义在style标签内部，或link标签外链的CSS文件中。为了令这类特殊的外链文件CSS规则也解析得到，需要对所述Web前端页面中所有样式表的内容进行分析。由于CSS文件作为样式表引入页面时不存在跨域访问的问题，而所述Web前端页面要想获取CSS文件的内容则需要借助HTTP请求访问，但样式数据的资源文件经常是与页面属于不同的域。为了有效规避上述问题，本发明实施例中，实现服务器端解析在线文件，将解析结果返回给浏览器端。

在浏览器端遍历所有样式表，将内联和外链的样式表全部发送给服务端；其中，所述内联的样式表是通过S101-S104获得目标样式数据解析得到的，服务端收到请求后，对CSS文件的url逐一进行资源下载，然后按样式表顺序，拼接为完整的一份大样式表，接着进行样式规则分析；其中的字体规则就由服务端从样式表中通过字符串匹配得到，汇总后返回给浏览器端，将所述自定义字体对应的样式表数据添加到所述目标样式数据中。

其中，相比于从CSS规则中查找所述待提取元素匹配的规则，本发明实施例中直接通过计算样式getComputedStyle获取所述待处理元素的完整样式的计算值，是更完整、准确、高效的做法。但计算样式有两个明显缺点：元素的完整样式的规模远超出实际声明的规模，部分样式属性的计算值与实际声明的值不符。针对这两个缺陷，本发明实施例中，还预设了样式去重处理算法对所述待提取元素中的目标元数据进行去重处理，得到目标样式数据，所述去重处理过程的具体执行流程如图3所示，包括步骤：

S301、将所述目标元数据中包含的默认样式数据进行过滤，得到第一目标样式数据；

本发明实施例中，所述目标样式表数据可能会包含默认样式，这些默认样式并不是网站开发者声明的样式，因此在元数据中不具有留存价值，且有必要识别并过滤。为识别元素的默认样式，将具有默认值的样式从元素的样式集中剔除，本发明实施例中，采用iframe制造样式隔离环境，在iframe中创造相同类型标签并获取其样式数据，然后与原有元素的样式数据进行对照，有效地判别出所有具有默认值的样式属性。

然而，元素样式具有默认值，这并不是该样式未经声明的充分条件，因为一部分样式具有可继承性。如果样式不可继承，当其值等于默认状态下的值，则该样式声明可以忽略；如果样式可继承，当其值等于父级元素对应样式属性的值时，则该样式声明可以忽略。

S302、对所述第一目标元数据中与网页开发者定义的样式属性值的不同的样式属性值还原，得到第二目标样式数据

本发明实施例中，所述第一目标数据中的目标样式表数据中的各个样式的样式属性值并不都是准确的，因为计算样式实质上是浏览器用于渲染DOM树而计算的中间数据。有些属性值仅仅是形式上的转化，例如color属性；而有些属性值则从默认的auto值变成了具体数值，例如跟渲染排版相关的样式属性width、hight等，这种情况需要采取特殊方法还原出本来的样式值。本发明实施例中。利用元素的隐藏，间接地获取跟渲染排版相关的元素样式的原始声明，获取所述原始声明中的样式值，得到第二目标样式数据。其中，所述第二样式数据与所述第一样式数据中可以存在部分相同的样式数据。

S303、对与所述第二目标样式数据进行统计、抽取得到公共样式数据；

本发明实施例中，所述第二目标样式数据中包含很多重复的样式声明，原因在于，有很多在结构上接近的元素，在网页设计时就被认为是同类元素、应用相同的CSS规则，因此不可避免地出现共享的样式。针对元素共享样式的问题，并考虑到层叠样式表的复杂性，采取在同级元素中识别同类的算法，对同级元素的样式做统计，把同级元素的共享样式尽可能抽取成单独的同类规则，保留各个同级元素对应的公共样式数据。

S304、将所述公共样式数据与所述第二目标样式数据进行整合，得到目标样式数据。

本发明实施例中，将所述第二目标样式数据中与所述公共样式相同的数据替换成公共样式数据，最终得到目标样式数据。

在访问标签属性时，遇到属性值为HTTP或HTTPS协议的url，程序会根据当前页面所在的地址进行修复。修复链接的目的主要是保证最终提取的HTML代码在脱离原页面后能够正常显示。如对于媒体类标签，例如IMG标签，src属性定义了图片的地址，如果该图片资源的地址是HTTP(S)协议的url，则应将完整的url保留，加入此图片节点的元数据。

本发明实施例中，所述的元素代码提取方法对应的完整的执行示意图如图4所示，其中：获取网页中对应的DOM树，通过开发者工具元素面板在所述DOM树中选取目标元素，所述目标元素为待提取元素，将所述目标元素通过开发者工具扩展功能将得到嵌入脚本进行解析，得到所述目标元素对应的DOM树元数据，依据元素样式去重算法模块对所述DOM树元数据进行处理，得到重构的DOM树和样式数据，其中，重构的DOM树和样式样数据分别与所述目标结构数据和目标样式数据对应。将上述数据传递到主线模块，若所述目标样式数据中，还包括样式外链表，将其对应的url发送到服务端的CSS文件解析服务中，依据@font-face规则，将解析的到的补充样式数据传递到所述主线模块，依据所述开发者工具扩展，将所述主线模块中的数据转换成与所述目标元素对应的元素代码。

所述元素代码提取方法，从前端页面解析目标元素元数据，经过数据清洗、修复，实行元素样式去重算法，极大程度还原和优化了目标元素的HTML结构和CSS样式；另外，外部样式解析服务解析跨域CSS文件中字体信息，弥补了纯浏览器端解析的不足。最终，本技术方案在实现上包含浏览器扩展和资源解析服务两部分，前者能够在前端一键提取目标元素，在后者的配合下生成高质量的HTML/CSS代码，适用于二次开发和页面重构。

本发明实施例中，与上述的元素代码的提取方法相对应的，本发明还提供了一种元素代码的提取系统，所述提取系统的结构如图5所示，包括：

获取模块401，解析模块402，去重模块403和转换模块404。

其中，

所述获取模块401，用于获取目标网站的文档对象模型中的待提取元素；

所述解析模块402，用于解析所述待提取元素中包含的目标元数据；

所述去重模块402，用于对所述目标元数据依据预设的样式去重处理算法进行样式去重处理，得到目标样式数据；

所述转换模块404，用于将所述目标样式数据转换成可提取的目标代码，对所述目标代码进行提取。

本发明公开了一种元素代码的提取系统，包括获取目标网站的文档对象模型中的待提取元素；解析所述待提取元素中包含的目标元数据；对所述目标元数据依据预设的样式去重处理算法进行样式去重处理，得到目标样式数据；将所述目标样式数据转换成可提取的目标代码，对所述目标代码进行提取。上述的系统，在获取到所述目标元素的目标元数据以后，对所述目标元数据进行了样式去重处理，避免了现有的一键提取元素代码的过程中，没有对提取过程进行处理，导致样式仍然存在不少冗余、缺漏、值不准确的问题，无法作为二次开发的基础代码的问题。

本发明实施例中，所述解析模块402包括：

获取单元405，对比单元406和删除单元407。

其中，

所述获取单元405，用于获取所述目标元素中包含的各个节点和其对应的标签属性数据集和样式表数据集；

所述比对单元406，用于将所述标签属性数据集和所述样式表数据集中数据与预设的必要属性和样式数据库中的各个必要数据进行比对；

所述删除单元407，用于将所述标签属性数据集中和所述样式表数据集中不存在于所述预设的必要属性和样式数据库中的数据删除，得到第一标签属性数据集和第一样式表数据集，其中，所述第一标签属性数据集和所述第一计样式表数据集组成所述待提取元素中包含的目标元数据。

本发明实施例中，所述去重模块403包括：

过滤单元408，还原单元409，抽取单元410和整合单元411。

其中，

所述过滤单元408，用于将所述目标元数据中包含的默认样式数据进行过滤，得到第一目标样式数据；

所述还原单元409，用于对所述第一目标元数据中与网页开发者定义的样式属性值的不同的样式属性值还原，得到第二目标样式数据；

所述抽取单元410，用于对与所述第二目标样式数据进行统计、抽取得到公共样式数据；

所述整合单元411，用于将所述公共样式数据与所述第二目标样式数据进行整合，得到目标样式数据。

本发明实施例中，所述元素代码提取系统还包括：

第一判断模块412和第一存储模块413。

其中，

所述第一判断模块412，用于判断所述待提取元素中是否包含伪元素；

所述第一存储模块413，用于若是，获取所述伪元素的第一样式数据，将所述第一样式数据存储到所述目标样式数据中。

本发明实施例中，所述元素代码提取系统还包括：

第二判断模块414和第二存储模块415。

其中，

所述第二判断模块414，用于判断所述待提取元素中是否存在外链文件；

所述第二存储模块415，用于若是，解析所述外链文件对应的第二样式数据，将所述第二样式数据存储到所述目标样式数据中。

需要说明的是，本说明书中的各个实施例均采用递进的方式描述，每个实施例重点说明的都是与其他实施例的不同之处，各个实施例之间相同相似的部分互相参见即可。对于装置类实施例而言，由于其与方法实施例基本相似，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。

最后，还需要说明的是，在本申请中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。

为了描述的方便，描述以上装置时以功能分为各种单元分别描述。当然，在实施本发明时可以把各单元的功能在同一个或多个软件和/或硬件中实现。

通过以上的实施方式的描述可知，本领域的技术人员可以清楚地了解到本发明可借助软件加必需的通用硬件平台的方式来实现。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品可以存储在存储介质中，如ROM/RAM、磁碟、光盘等，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本发明各个实施例或者实施例的某些部分所述的方法。

以上对本发明所提供的一种元素代码的提取方法及系统进行了详细介绍，本文中应用了具体个例对本发明的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本发明的方法及其核心思想；同时，对于本领域的一般技术人员，依据本发明的思想，在具体实施方式及应用范围上均会有改变之处，综上所述，本说明书内容不应理解为对本发明的限制。

Claims (4)

1.一种元素代码的提取方法，其特征在于，包括：

获取目标网站的文档对象模型中的待提取元素；解析所述待提取元素中包含的目标元数据，包括：获取目标元素中包含的各个节点和其对应的标签属性数据集和样式表数据集；其中，所述目标元素还包含 SVG 元素；将所述标签属性数据集和所述样式表数据集中数据与预设的必要属性和样式数据库中的各个必要数据进行比对；

将所述标签属性数据集中和所述样式表数据集中不存在于所述预设的必要属性和样式数据库中的数据删除，得到第一标签属性数据集和第一样式表数据集，其中，所述第一标签属性数据集和所述第一样式表数据集组成所述待提取元素中包含的目标元数据；

对所述目标元数据依据预设的样式去重处理算法进行样式去重处理，得到目标样式数据，包括：

将所述目标元数据中包含的默认样式数据进行过滤，得到第一目标样式数据，具体的：采用 iframe 制造样式隔离环境，在 iframe 中创造相同类型标签并获取其样式数据，然后与原有元素的样式数据进行对照，判别出具有默认值的样式属性并进行过滤；

对所述第一目标样式数据中与网页开发者定义的样式属性值的不同的样式属性值还原，得到第二目标样式数据；

对与所述第二目标样式数据进行统计、抽取得到公共样式数据；

将所述公共样式数据与所述第二目标样式数据进行整合，得到目标样式数据；

将所述目标样式数据转换成可提取的目标代码，对所述目标代码进行提取；

判断所述待提取元素中是否存在外链文件；若是，解析所述外链文件对应的第二样式数据，将所述第二样式数据存储到所述目标样式数据中，当所述外链文件为自定义字体时，通过层叠样式表 CSS3 的@font-face 模块解析得到补充样式作为所述第二样式数据。

2.根据权利要求 1 所述的方法，其特征在于，还包括：

判断所述待提取元素中是否包含伪元素；

若是，获取所述伪元素的第一样式数据，将所述第一样式数据存储到所述目标样式数据中。

3.一种元素代码的提取系统，其特征在于，包括：

获取模块，用于获取目标网站的文档对象模型中的待提取元素；

解析模块，用于解析所述待提取元素中包含的目标元数据；

所述解析模块包括：

获取单元，用于获取目标元素中包含的各个节点和其对应的标签属性数据集和样式表数据集；其中，所述目标元素还包含 SVG 元素；

比对单元，用于将所述标签属性数据集和所述样式表数据集中数据与预设的必要属性和样式数据库中的各个必要数据进行比对；

删除单元，用于将所述标签属性数据集中和所述样式表数据集中不存在于所述预设的必要属性和样式数据库中的数据删除，得到第一标签属性数据集和第一样式表数据集，其中，所述第一标签属性数据集和所述第一样式表数据集组成所述待提取元素中包含的目标元数据；

去重模块，用于对所述目标元数据依据预设的样式去重处理算法进行样式去重处理，得到目标样式数据；

所述去重模块包括：

过滤单元，用于将所述目标元数据中包含的默认样式数据进行过滤，得到第一目标样式数据，具体的：采用 iframe 制造样式隔离环境，在 iframe 中创造相同类型标签并获取其样式数据，然后与原有元素的样式数据进行对照，判别出具有默认值的样式属性并进行过滤；

还原单元，用于对所述第一目标样式数据中与网页开发者定义的样式属性值的不同的样式属性值还原，得到第二目标样式数据；

抽取单元，用于对与所述第二目标样式数据进行统计、抽取得到公共样式数据；

整合单元，用于将所述公共样式数据与所述第二目标样式数据进行整合，得到目标样式数据

转换模块，用于将所述目标样式数据转换成可提取的目标代码，对所述目标代码进行提取；

第二判断模块，用于判断所述待提取元素中是否存在外链文件；

第二存储模块，用于若是，解析所述外链文件对应的第二样式数据，将所述第二样式数据存储到所述目标样式数据中，当所述外链文件为自定义字体时，通过层叠样式表 CSS3的@font-face 模块解析得到补充样式作为所述第二样式数据。

4.根据权利要求 3 所述的系统，其特征在于，还包括：

第一判断模块，用于判断所述待提取元素中是否包含伪元素；

第一存储模块，用于若是，获取所述伪元素的第一样式数据，将所述第一样式数据存储到所述目标样式数据中。

Images