一种重组Html结构并通过鼠标点击获取Html组件的方法

摘要

本发明涉及网页处理技术领域，具体涉及一种重组Html结构并通过鼠标点击获取Html组件的方法。本发明方法包括：1.通过输入的指定Web页面的Url，获取原始的Url的Html代码；2.在原始的Html代码结构上增加Css、Javascript，对Html进行重组，以支持鼠标移动与点击时的动作；3.在页面上展示重组后的Html，在新页面上移动鼠标时，展示鼠标所在的区域并进行颜色变化区分，当点击时返回当前鼠标点击的Html组件。本发明解决了通过鼠标移动展示指定的Html组件，以及通过鼠标点击获取指定的Html组件的功能的技术难题，本发明可广泛应用于对原Html结构进行展示或重组的Web获取技术上，特别用于获取Html页面数据的相关系统设计中。

说明书

技术领域

本发明涉及网页处理技术领域，具体涉及一种重组Html结构并通过鼠标点 击获取Html组件的方法。

背景技术

随着Web万维网的发展与普及，越来越多数据信息都通过Html组件的形式 在网络上展示与传播，但用户在使用这些Html组件时，只能被动地接收服务器 上展示的最终结果，而无法对展示的数据进行获取或修改，这样对有些应用来 说，比较难以利用网上现有的数据来用于展示或获取。

发明内容

本发明解决的技术问题是提供一种重组Html结构并通过鼠标点击获取 Html组件的方法；通过重组Web页面的Html结构，从而为页面上获取Html 组件提供一种快捷方便的方式，此方式可广泛应用于对原Html结构进行展示或 重组的Web获取技术上，特别用于获取Html页面数据的相关系统设计中。

本发明解决上述技术问题的技术方案是：

所述的方法包括以下步骤：

步骤一、输入要获取Html组件的页面Url；

步骤二、把页面Url传到后台进行整体Html结构获取，并在Html中增加 Css、Javascript对Html进行重组；

步骤三、把重组后的Html传输到前台，通过弹出的Div组件进行展示；

步骤四、在弹出的Div组件上，通过鼠标移动，重组后的Html通过增加的 Javascript判断鼠标位置，改变鼠标所在的Html组件的背景颜色，背景颜色为增 加的Css所定义；

步骤五、当鼠标移动到最终的Html组件上时，背景颜色进行改变，当点击 鼠标左键时，通过Javascript返回点击所在的Html组件，最终输出点击获取的 Html结果。

所述的步骤一中，在获取Html组件前，需获取页面的完整Url并用于输入。

所述的步骤二中，通过输入的页面Url获取页面的整体Html结构，页面的 整体Html结构通过Jsoup第三方开源控件获取，同时通过组织为Document对 象后，在其中的Head开头加入Css与Javascript，完成对Html组件的重组。

所述的步骤三中，把重组后的整体Html组件传输到前台，通过Div组件弹 出窗口进行展示，用于页面的查看，鼠标可进行移动与点击。

所述的步骤四中，鼠标在弹出的Div组件上移动时，通过增加的Javascript 判断鼠标在各Html组件上的移进与移出事件，对鼠标的移动做出各Html组件 的背景颜色的变化，展示给用户鼠标所在的Html组件；鼠标在移进与移出事件 上，需要判断所在的Html是否存在嵌套，如果是需要获取最底层的Html组件 进行背景颜色的改变。

所述的步骤五中，当鼠标移动到要获取的Html组件上时，Html组件改变背 景颜色，当点击鼠标左键时通过Javascript返回该Html组件的Html结构，用于 相关系统的使用；此时，Javascript需判断点击的组件是否存在嵌套，如果有嵌 套多个Html组件时，需返回最底层的Html组件；也可通过返回多个Html组件 的方式，由操作人员选择。

重组Html结构的Css组件，需要定义为可明显展示与原Html结构的区别， 当改变背景颜色时可明显对各Html组件进行区分；Css组件的背景颜色通过 Javascript进行增加或去除；

重组Html结构的Javascript，需增加鼠标移进移出各Html组件时改变Html 组件的背景颜色的方法，主要是通过重构MouseOut与MouseIn方法。

本发明方法通过用户输入Html组件的源Url，传输到后台进行重组后，展 示在Div组件上，用于用户的Html组件的展示与获取，方便特殊的应用提高系 统的操作友好性，例如网上数据截取时，要定义截取的数据区域块，一般的方 法是通过分析Html源代码，获取数据区域块的开始标识与结束标识，但这对于 不懂Html语言的人来是，此方法很难操作；通过本发明方法，可以在Div组件 上使用鼠标移动进行选择要获取的数据区域块，同时点击鼠标左键后，可直接 返回所在的数据区域块，并用于设置开始标识与结束标识，大大方便了用户的 操作，提高了系统操作的友好性，使系统的使用更加方便快捷。本发明通过重 组Html结构，从而提供一个方便快捷获取Html组件的方式，可广泛应用于对 原Html结构进行展示或重组的Web获取技术上，特别用于获取Html页面数据 的相关系统设计中，为对原来的Html结构的重组提供一个解决方案。

附图说明

下面结合附图对本发明进一步说明：

图1是本发明系统流程图；

具体实施方式

如图1所示，本发明具体包含以下几个步骤：

步骤一、把系统部署在Tomcat上，配置好相关属性，运行整个系统；

步骤二、输入要进行获取Html组件的Web页面的RUL，并传输到后台；

步骤三、后台通过Jsoup控件进行下载，并形成Document对象；

步骤四、在Document对象上增加背景颜色Css、鼠标移进移出Javascript， 并把最终的重组Html传输到前台；

步骤五、通过一个弹出的Div组件对重组后的Html结构进行展示；

步骤六、鼠标在展示的Html结构上进行移动时，通过Javascript进行控制 并改变所在的Html组件的背景颜色；

步骤七、当鼠标固定在一个特定的Html组件上时，点击鼠标左键，系统返 回点击的Html组件。

更具体而言，在获取Html组件前，需获取页面的完整Url并用于输入。

通过输入的页面Url获取页面的整体Html结构，页面的整体Html结构通 过Jsoup第三方开源控件获取，同时通过组织为Document对象后，在其中的Head 开头加入Css与Javascript，完成对Html组件的重组。

把重组后的整体Html组件传输到前台，通过Div组件弹出窗口进行展示， 用于页面的查看，鼠标可进行移动与点击。

鼠标在弹出的Div组件上移动时，通过增加的Javascript判断鼠标在各Html 组件上的移进与移出事件，对鼠标的移动做出各Html组件的背景颜色的变化， 展示给用户鼠标所在的Html组件；鼠标在移进与移出事件上，需要判断所在的 Html是否存在嵌套，如果是需要获取最底层的Html组件进行背景颜色的改变。

当鼠标移动到要获取的Html组件上时，Html组件改变背景颜色，当点击鼠 标左键时通过Javascript返回该Html组件的Html结构，用于相关系统的使用； 此时，Javascript需判断点击的组件是否存在嵌套，如果有嵌套多个Html组件时， 需返回最底层的Html组件；也可通过返回多个Html组件的方式，由操作人员 选择。

重组Html结构的Css组件，需要定义为可明显展示与原Html结构的区别， 当改变背景颜色时可明显对各Html组件进行区分；Css组件的背景颜色通过 Javascript进行增加或去除；

重组Html结构的Javascript，需增加鼠标移进移出各Html组件时改变Html 组件的背景颜色的方法，主要是通过重构MouseOut与MouseIn方法。