CN103635897B - 对运行页面进行动态更新的方法 - Google Patents

对运行页面进行动态更新的方法 Download PDF

Info

Publication number
CN103635897B
CN103635897B CN201280030637.4A CN201280030637A CN103635897B CN 103635897 B CN103635897 B CN 103635897B CN 201280030637 A CN201280030637 A CN 201280030637A CN 103635897 B CN103635897 B CN 103635897B
Authority
CN
China
Prior art keywords
dom
document
node tree
text
node
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Active
Application number
CN201280030637.4A
Other languages
English (en)
Other versions
CN103635897A (zh
Inventor
M·C·范宁
M·豪尔
G·林斯各特
E·特沃伦
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Microsoft Technology Licensing LLC
Original Assignee
Microsoft Technology Licensing LLC
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Microsoft Technology Licensing LLC filed Critical Microsoft Technology Licensing LLC
Publication of CN103635897A publication Critical patent/CN103635897A/zh
Application granted granted Critical
Publication of CN103635897B publication Critical patent/CN103635897B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/957—Browsing optimisation, e.g. caching or content distillation
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/30—Information retrieval; Database structures therefor; File system structures therefor of unstructured textual data
    • G06F16/31—Indexing; Data structures therefor; Storage structures
    • G06F16/316—Indexing structures
    • G06F16/322—Trees
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/30—Information retrieval; Database structures therefor; File system structures therefor of unstructured textual data
    • G06F16/33—Querying
    • G06F16/3331—Query processing
    • G06F16/334—Query execution
    • G06F16/3344—Query execution using natural language analysis
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/30—Information retrieval; Database structures therefor; File system structures therefor of unstructured textual data
    • G06F16/36—Creation of semantic tools, e.g. ontology or thesauri
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
    • G06F16/986—Document structures and storage, e.g. HTML extensions

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Databases & Information Systems (AREA)
  • General Physics & Mathematics (AREA)
  • Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • Data Mining & Analysis (AREA)
  • Computational Linguistics (AREA)
  • Software Systems (AREA)
  • Artificial Intelligence (AREA)
  • Information Transfer Between Computers (AREA)
  • Document Processing Apparatus (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

一种方法包括解析文本源文档来构造文档节点树，使得文档节点树包括与文档节点树的每一节点相对应的指示文本在文本源文档内的位置的文本偏移量。该方法包括从文档节点树构造文档对象模型（DOM）和表示该DOM的查看节点树。查看节点树的构造包括将查看节点树映射到文档节点树。该方法包括提供DOM的运行表示和以下之一：跟踪对DOM的修改以提供第一改变信息以及跟踪对文本源文档的修改以提供第二改变信息。

Description

对运行页面进行动态更新的方法
背景技术
web开发工具使得开发人员能够诊断超文本标记语言（HTML）和层叠样式表（CSS）问题。开发人员可动态地修改文档对象模型（DOM）元素（包括 CSS选择器）并在浏览器中的运行页面中立即查看所反映的改变。然而，为了将修改永久应用到产生该页面的标记文本源文档，开发人员需要定位并适当地修改与所需修改相关联的标记文本或起源JavaScript。然而，定位与所需修改相关联的源代码文本可能是困难的，因为相关联的源代码文本可能不是立即明显的或可能源于开发人员不熟悉的代码。另外，一旦定位了与所需修改相关联的源代码文本，就可能需要若干步骤来应用该修改并在浏览器中实际上看到该修改的结果。
发明内容
提供本概述是为了以简化的形式介绍将在以下详细描述中进一步描述的一些概念。本概述并不旨在标识出所要求保护的主题的关键特征或必要特征，也不旨在用于限定所要求保护的主题的范围。
一个实施例提供一种方法，该方法包括解析文本源文档来构造文档节点树，使得文档节点树包括与文档节点树的每一节点相对应的指示文本在文本源文档内的位置的文本偏移量。该方法包括从文档节点树构造文档对象模型（DOM）和表示该DOM的查看节点树。查看节点树的构造包括将查看节点树映射到文档节点树。该方法包括提供DOM的运行表示和以下之一：跟踪对DOM 的修改以提供第一改变信息以及跟踪对文本源文档的修改以提供第二改变信息。
附图简述
包括附图来提供了对各实施例的进一步理解，且这些附图被合并在本发明书内并构成其一部分。附图示出各实施例，并且与说明书一起用于解释本发明的原理。其他实施例和各实施例的许多预期优点将随着参考下面的详细描述进行更好的理解而得到认识。附图的元素不一定相对于彼此而缩放。相同的附图标记指代对应的类似部分。
图1是示出web开发工具的一个实施例的框图。
图2是示出适于实现图1中示出的web开发工具的各方面的计算设备/环境的框图。
图3是示出web开发工具的一个实施例的功能框图。
图4是示出映射到文档节点树的HTML文本的一个示例的框图。
图5是示出映射到查看节点树的文档节点树的一个示例的框图。
图6是示出浏览器实例所表示的DOM的查看节点树的一个示例的框图。
图7是示出在修改之前和之后的文档节点树的一个示例的框图。
图8是示出修改的改变记录的一个示例的框图。
图9是示出用于基于对标记文本源文档的修改对运行网页进行动态更新并用于基于对运行网页的修改对标记文本源文档进行动态更新的方法的一个实施例的流程图。
详细描述
在以下具体实施例中，对附图进行了参考，附图构成了实施例的一部分且在其中作为示例示出了可在其中实践本发明的各特定实施例。可以理解，可以使用其它实施例并且可以做出结构上或逻辑上的改变而不背离本发明的范围。因此，以下详细描述并不旨在限制，并且本发明的范围由所附权利要求来限定。
应理解，此处描述的各示例性实施例的特征可相互组合，除非另外具体注明。
图1是示出web开发工具100的一个实施例的框图。web开发工具100包括文本源文档102和该文本源文档的运行表示104。在一个实施例中，文本源文档102在网页源代码编辑器中被打开。在其他实施例中，文本源文档102或文本源文档102的各部分被显示在网页源代码查看器中。在一个实施例中，文本源文档102的运行表示104由浏览器提供。在其他实施例中，文本源文档102 的运行表示104由设计器、属性窗格、或文本源文档的运行表示的其他合适的可视化来提供。
对网页源代码的修改被应用于该网页的由运行表示104来表示的运行页面实例，来对该运行页面实例进行动态更新以包括对网页源代码的该修改。同样，对网页的运行页面实例中的DOM元素的修改被应用于网页源代码以对网页源代码进行动态更新来包括对该DOM元素的修改。以此方式，网页开发人员可以修改浏览器中的网页的运行实例中的DOM元素和/或修改网页源代码，并且这些修改分别被动态地应用于网页源代码和/或网页的运行实例。
文本源文档102的网页源代码经由链接112被链接到由运行表示104所表示的网页的运行页面实例中的相关联的文档对象模型（DOM）110元素。因此，通过选择或突出显示运行表示104中的DOM元素，与所选择的或所突出显示的DOM元素相关联的网页文本被选择或突出显示在文本源文档102内。同样，通过选择或突出显示文本源文档102内的网页文本的一部分，与网页文本的所选择的或突出显示的部分相关联的一个或多个DOM元素被选择或突出显示在运行表示104内。以此方式，网页开发人员可即时匹配DOM元素，因为它们与定义这些DOM元素的网页文本源代码一起被表示在网页的运行实例中。
在一个实施例中，文本源文档102被在源代码编辑器中打开，这可包括适于打开、创建、编辑、以及保存网页文本源文档的任何合适的文本编辑器在一个实施例中，可被源代码编辑器编辑的网页文本源文档包括标记文本，如超文本标记语言（HTML）、层叠样式表（CSS）、可扩展标记语言（XML）、和/ 或可扩展超文本标记语言（XHTML）。网页文本源文档也可包括JavaScript或 Jscript。如本文所使用的，“JS”被用于指示JavaScript和Jscript两者。在其他实施例中，源代码编辑器适于打开、创建、编辑以及保存包括其他合适的网页标记文本和脚本语言的网页文本源文档。在一个实施例中，源代码编辑器支持网页文本源文档的多个实例，使得相关或链接的各网页文本源文档可在源代码编辑器中被同时打开。
在一个实施例中，运行表示104是适于表示DOM110的web浏览器。在一个实施例中，浏览器是遵循万维网联盟（W3C）的web浏览器。在一个实施例中，浏览器提供DOM110的浏览器不可知的表示，使得DOM110的表示不依赖于任何特定浏览器，如Internet Explorer、FireFox、Chrome、Safari、或者 Opera。在另一实施例中，选择浏览器使得DOM110的表示是基于所选浏览器的。浏览器可包括供用户选择DOM110的表示所基于的特定浏览器（如Internet Explorer、FireFox、Chrome、Safari、或者Opera）的选项。在一个实施例中，浏览器支持DOM的多个实例，使得相关或链接的各网页可同时运行在浏览器内。运行表示1104还可包括运行脚本108和应用程序编程接口（API）。脚本108和API106可以在运行表示104内的DOM110中修改、删除、和/或插入 DOM元素。
图2是示出适于实现先前参考图1描述并示出的web开发工具100的各方面的计算设备/环境200的一个实施例的框图。计算设备/环境200包括一个或多个处理单元212和系统存储器214。取决于计算设备/环境200的确切配置和类型，存储器214可以是易失性（如RAM）、非易失性（诸如ROM、闪存等）或两者的结合。
计算设备/环境200还可具有附加的特征/功能。例如，计算设备/环境200 还可包含附加存储（可移动和/或不可移动），包括但不限于磁盘、光盘或磁带。这样的附加存储在图2中由可移动存储216和不可移动存储218示出。计算机存储介质包括以用于存储诸如计算机可读指令、数据结构、程序模块或其他数据等的任何合适的方法或技术实现的易失性和非易失性、可移动和不可移动介质。存储器214、可移动存储216、以及不可移动存储218都是计算机存储介质（例如，储存在被至少一个处理器执行时使得该至少一个处理器执行一种方法的计算机可执行指令的计算机可读存储介质）的示例。计算机存储介质包括，但不限于，RAM、ROM、EEPROM、闪存或其它存储器技术、CD-ROM、数字多功能盘（DVD）或其它光盘存储、磁带盒、磁带、磁盘存储或其它磁性存储设备、或能用于存储所需信息且可以由计算设备/环境200访问的任何其它介质。任何这样的计算机存储介质都可以是计算设备/环境200的一部分。
计算设备/环境200的各元件经由一个或多个通信链路215通信耦合在一起。计算设备/环境200还包括允许计算设备/环境200与其它计算机/应用226 进行通信的一个或多个通信连接224。计算设备/环境200还可包括诸如键盘、定点设备（例如，鼠标）、笔、语音输入设备、触摸输入设备等输入设备222。计算设备/环境200还可包括诸如显示器、扬声器、打印机等输出设备220。
图2和以上讨论旨在提供其中可实现一个或多个实施例的合适的计算环境的简要概括描述，并且不旨在对各实施例的使用范围或功能提出任何限制。
图3是示出web开发工具300的一个实施例的功能框图。在一个实施例中， web开发工具300提供先前参考图1描述并示出的web开发工具100。web开发工具300包括标记文本302、标记解析器306、文档节点树310、DOM构建器314、浏览器318、DOM修改监听器322、以及标记串行化器328。标记文本302被输入到标记解析器306，如在304处所示。标记解析器306输出文档节点树310，如在308处所示。文档节点树310被输入到DOM构建器314，如在312处所示。DOM构建器314将DOM输出给浏览器318，如在316处所示。 DOM修改监听器322跟踪浏览器318内对DOM元素的改变，如在320处所示。 DOM修改监听器322将改变信息输出给文档节点树310，如在324处所示。标记串行化器328从文档节点树310接收改变信息，如在326处所示。标记串行化器328用经串行化的改变信息来更新标记文本302，如在330处所示。
标记文本302包括HTML、CSS、XML、XHTML和/或其他合适的标记文本。在一个实施例中，包括标记文本302的源文档在源代码编辑器中被打开。在其他实施例中，web开发工具300访问包括标记文本302的源文档而不在源代码编辑器中打开该源文档。标记文本302定义用于提供网页的任何合适数量的对象。在图3所示的示例中，标记文本302包括HTML。该示例HTML定义用于提供包括文本“Hello”的DOM元素的一个对象。
由于标记文本302的文本特性，标记文本302的每一字符具有相对应的行号（如在332处所示）以及该行的相对应的相对字符号（如在334处所示）。例如，标记文本302中的字符“H”在行2、字符8处。标记文本302的每一字符还具有指示该字符相对于标记文本302的开头的位置的字符号。例如，标记文本302中的字符“H”具有字符号26，因为它是标记文本302中的第26个字符。因而，标记文本302中的每一字符可被基于行号和该行内的位置或基于指示该字符相对于标记文本302的开头的位置的字符号来定位。同样，标记文本 302内的一系列字符可基于行号范围和在这些行内的位置或基于字符号范围来定位。如本文所使用的，这些行号范围和这些行内的位置或者字符号范围被称为“文本偏移量”。
标记文本302被标记解析器306解析以构造文档节点树310。在一个实施例中，标记解析器306位于与源代码编辑器相同的计算设备/环境上。在另一实施例中，标记解析器306位于与源代码编辑器不同的计算设备/环境上。标记解析器306包括HTML解析器、CSS解析器、XML解析器、XHTML解析器、和/或其他合适的标记文本解析器。在一个实施例中，标记解析器306是遵循 W3C的。在另一实施例中，标记解析器306基于与特定浏览器（如InternetExplorer、FireFox、Chrome、Safari、或者Opera）相关联的解析器。在其他实施例中，标记解析器306是包括与特定浏览器相关联的基本实现以及基于对该特定浏览器运行时执行和/或解析行为的知识对该解析实现的更改的混合解析器。
标记解析器306将来自标记文本302的与网页相关的源文档细节包括在文档节点树310中。除了HTML对象和CSS对象外，标记解析器306包括来自标记文本302的其他细节，如可能被浏览器解析的文档类型以及源内评论。标记解析器306还将文本偏移量包括在文档节点树310中，指示标记文本302中源文档细节的位置。文本偏移量将文档节点树310的每一节点映射到与该节点相关联的标记文本。以此方式，在解析过程期间，维护文档节点树310和标记文本302之间的链接。这将标记解析器306与集成在浏览器内的常规解析器区分开，常规解析器在呈现期间通常出于性能原因而丢弃或变换源文档细节并且不维护源文档和所呈现的文档之间的任何链接。
在图3所示的示例中，文档节点树310使用字符号范围作为文本偏移量。例如，文档节点树310包括父节点“DIV”的文本偏移量“文本跨度：1-42”，这指示对象“DIV”在标记文本302中的位置。同样，文档节点树310包括属性“id”的文本偏移量“文本跨度：6-15”、子节点“P”的文本偏移量“文本跨度：23-34”、以及子节点“Hello”的文本偏移量“文本跨度：26-30”。因而，通过将每一对象的文本偏移量包括在文档节点树310内，文档节点树310 内的每一对象被映射到与该对象相关联的源文档标记文本。
DOM构建器314从文档节点树310构造DOM和表示DOM的查看节点树。 DOM构建器314将查看节点树的每一节点映射到文档节点树的对应节点，使得DOM的每一元素被链接到文档节点树310中的相关联的对象并从而链接到与该对象相关联的源文档标记文本。在一个实施例中，DOM构建器314将事件监听器注入DOM中以跟踪对该DOM的修改。
在一个实施例中，DOM构建器314构造JS元素。一旦执行，JS元素可构造和/或修改DOM元素和查看节点树内的对应节点，这可不具有文档节点树310 内的对应节点。
在一个实施例中，DOM构建器314构造不依赖于任何特定浏览器（如 InternetExplorer、FireFox、Chrome、Safari或者Opera）的浏览器不可知的DOM。在另一实施例中，DOM构建器314被选择使得DOM是基于所选浏览器来构造的。DOM构建器314可包括供用户选择DOM的构造所基于的特定浏览器（如 Internet Explorer、FireFox、Chrome、Safari、或者Opera）的选项。所构造的 DOM由浏览器318表示。在一个实施例中，浏览器318是遵循W3C的浏览器。在图3所示的示例中，浏览器318显示包括文本“Hello”的DOM元素，如标记文本302所定义的。
查看节点树和文档节点树310将浏览器318内的DOM元素链接到标记文本302。例如，通过选择或突出显示浏览器318内的“Hello”，标记文本302 内的相关联的标记文本被选择或突出显示。反过来，通过选择或突出显示标记文本302内的“<p>Hello</p>”，浏览器318中相关联的DOM元素“Hello”被选择或突出显示。
DOM修改监听器322跟踪对浏览器318内DOM元素的改变，如DOM变化。在一个实施例中，DOM修改监听器322跟踪由于API106和/或脚本108 （图1）而对DOM元素的改变。在一个实施例中，DOM修改监听器322生成对DOM元素的每一改变的改变记录。每一改变记录通过查看节点树的节点和应用于该节点的改变来标识经修改的DOM元素。改变记录还可标识已被删除或插入的DOM元素。DOM修改监听器322随后基于改变记录来更新文档节点树310中的对应节点。
在一个实施例中，可通过用户经由属性面板或其他合适的机制来修改元素属性和/或样式属性经由文档节点树310作出对DOM元素的改变。在这一实施例中，属性面板生成对元素的每一改变的改变记录。每一改变记录通过文档节点树的节点和应用于该节点的改变来标识要修改的元素。改变记录基于改变记录来更新文档节点树310中的节点。DOM构建器314随后基于经更新的文档节点树310来更新DOM和表示DOM的查看节点树，使得在浏览器318中的 DOM的表示包括该修改。
标记串行化器328将文档节点树310中的改变信息串行化以用于更新标记文本302。标记串行化器328将对文档节点树310的改变（例如，由于来自DOM 修改监听器322或来自属性面板的改变记录）格式化以包括修改标记文本302 来与经更新的文档节点树310相匹配所需的信息。在一个实施例中，标记串行化器328所提供的信息包括指示标记文本302中要作出该改变的位置的文本偏移量以及要放置在所指示的位置处的新值。在一个实施例中，标记串行化器328 将对文档节点树310的多个改变的改变信息组合成单个经串行化的数据文件，以响应于用户动作在批处理过程中更新标记文本302。在另一实施例中，标记串行化器328可在包括多个数据文件的批处理过程中更新标记文本302。
还可对源代码编辑器内的标记文本302作出改变。在一个实施例中，在对标记文本302做出改变之后，标记解析器306执行对标记文本302的部分解析以更新文档节点树310。在另一实施例中，在对标记文本302做出改变之后，标记解析器306执行对标记文本302的完整解析以更新文档节点树310。DOM 构建器314随后更新DOM和表示该DOM的查看节点树，使得对标记文本302 的改变被反映在浏览器318中。
图4是示出映射到文档节点树404的HTML文本402的一个示例400的框图。为了从HTML文本402构造文档节点树404，HTML文本402被标记文本解析器解析，如先前参考图3描述并示出的标记解析器306。在图4所示的示例中，HTML文本402被解析，使得文档节点树404包括父节点“DIV”和子节点“SPAN”及“P”。子节点“SPAN（跨度）”包括进一步的子节点“TEXT(Hello) （文本（你好））”。子节点“P”包括进一步的子节点“TEXT(World)（文本（世界））”和具有值“foo”的属性“class（类）”。
因而，文档节点树404按结构化树格式来维护HTML文本402源文档细节。如先前参考图3描述并示出的，文档节点树404还包括每一父节点和子节点的文本偏移量，以分别指示与每一父节点和子节点相关联的HTML文本在HTML 文本402内的特定位置。
图5是示出映射到查看节点树508的文档节点树506的一个示例500的框图。文档节点树506按结构化树格式来提供标记文档502的源文档细节。查看节点树508表示HTML实例管理器504中DOM的一个实例。在一个实施例中， HTML实例管理器504可以管理查看节点树的多个实例。在一个实施例中，在 HTML实例管理器504内表示DOM的查看节点树508是基于所选浏览器的。 HTML实例管理器504可包括供用户选择查看节点树508所基于的特定浏览器（如Internet Explorer、FireFox、Chrome、Safari、或者Opera）的选项。
查看节点树508的每一节点包括将每一节点映射到文档节点树506中的相关联的节点的标识符。在一个实施例中，该标识符被先前参考图3描述并示出的DOM构建器314分配给查看节点树的每一节点。在一个实施例中，该标识符是数字。在图5所示的示例中，查看节点树508的标识符“105”被映射到文档节点树506的父节点“DIV”。同样，标识符“106”被映射到子节点“SPAN”且标识符“107”被映射到子节点“TEXT(Hello)”。因而，查看节点树的每一标识符将查看节点树的一节点链接到文档节点树中的相关联的节点。
图6是示出浏览器实例614所表示的DOM的查看节点树610的一个示例600的框图。应用602包括HTML实例管理器608，该HTML实例管理器608 管理查看节点树610。在一个实施例中，HTML实例管理器608管理查看节点树的多个实例。应用606包括实例管理器612，该实例管理器612管理浏览器实例614。在一个实施例中，实例管理器612管理多个浏览器实例。浏览器实例614表示DOM的实例。应用602通过通信链路（COM）604通信耦合到应用606。
查看节点树610的每一节点的标识符被链接到浏览器实例614所表示的相关联的DOM元素，如查看节点树610中每一“DOM代理”所指示的。因而，浏览器实例614所表示的每一DOM元素被链接或映射到查看节点树610的一节点。因此，浏览器实例614中表示的每一DOM元素被通过查看节点树和文档节点树链接到标记文本源文档中的标记文本。
在图6所示的示例中，查看节点树610的标识符“105”被链接到浏览器实例614所表示的DOM元素的标识符“105”的DOM代理。同样，标识符“106”被链接到标识符“106”的DOM代理且标识符“107”被链接到标识符“107”的DOM代理。在该示例中，查看节点树610包括将子节点“TEXT(Hello)”（图 5）链接到浏览器实例614内的DOM元素“Hello”的标识符“107”。
图7是示出在修改之前和之后的文档节点树的一个示例的框图。文档节点树702是修改之前的且文档节点树704是修改之后的。在这一示例中，对对象 <p style=“font-size:10pt”>Hello</p>作出了改变，以将字体大小从在706处所示的10pt（磅）改为在708处所示的25pt。在修改之前，标记文本已被解析来构造文档节点树702，并且文档节点树702已被用来构造在浏览器中表示的DOM。
在一个实施例中，修改是对标记文本作出的。经修改的标记文本随后被部分地解析或完全地解析。在一个实施例中，在解析期间使用树差异（diffing）算法以确定对文档节点树的改变。在图7所示的示例中，在解析之后，文档节点树704被提供，其中对象<p style=“font-size:10pt”>Hello</p>已被改变成<p style=“font-size:25pt”>Hello</p>。根据对文档节点树的改变，生成如图8所示的改变记录800。
图8是示出修改的改变记录800的一个示例的框图。示例改变记录800是针对先前参考图7描述并示出的对字体大小的修改的。在其他示例中，改变记录800可被用来修改其他合适的值、属性、和/或样式，或用来插入和/或删除 DOM元素。改变记录800包括对其作出了修改的节点“STYLE（样式）”、被修改的值或属性“font-size（字体大小）”、所指示的属性的旧值“10pt”、以及所指示的属性的新值“25pt”。使用改变记录800，文档节点树被更新且改变被转发给实例管理器（图5）以更新浏览器所表示的查看节点树和DOM。因此，在对标记文本进行了修改之后，标记文本、文档节点树、以及浏览器所表示的DOM被同步。
在另一实施例中，对DOM元素的改变是通过元素属性和/或样式属性来作出的。在一个实施例中，元素属性和/或样式属性经由web开发工具的属性窗格或其他合适的机制被修改。如上所述，属性窗格可被用来改变文档节点树中的（而非标记文本中的）元素属性和/或样式属性。在这一实施例中，图8中示出的改变记录800是由属性窗格响应于对元素属性和/或样式属性的修改而生成的。使用改变记录800，文档节点树被更新且改变被转发给实例管理器（图5）以更新浏览器所表示的查看节点树和DOM。另外，与修改相关联的标记文本也基于文档节点树与标记文本之间通过文档节点树中的文本偏移量提供的映射被更新。在该示例中，文本“10pt”的位置处的标记文本被用文本“25pt”替换。因此，在对元素属性和/或样式属性进行了修改之后，标记文本、文档节点树、以及浏览器所表示的DOM被同步。
在又一实施例中，对DOM元素的改变通过DOM变化事件来检测。DOM 变化事件所检测到的对DOM元素的改变可以是由于例如JS的执行。在一个实施例中，对DOM元素的改变也通过基于用户动作或定时器来分析表示DOM 的查看节点树以找出改变来确定。DOM变化事件所检测到的或通过对查看节点树的分析而确定的每一改变被用来生成图8中示出的改变记录800。通过使用改变记录800，文档节点树和标记文本被更新。因此，在对DOM进行了修改之后，标记文本、文档节点树、以及浏览器所表示的DOM被同步。
图9是示出用于基于对标记文本源文档的修改对运行网页进行动态更新并用于基于对运行网页的修改对标记文本源文档进行动态更新的方法900的一个实施例的流程图。在902，标记文本源文档（例如，先前参考图3描述并示出的标记文本302）在源代码编辑器中被打开。在904，构造映射到标记文本源文档的文档节点树（例如，先前参考图3描述并示出的文档节点树310）。在 906，构造DOM和表示映射到文档节点树的DOM的查看节点树（例如，先前参考图5描述并示出的查看节点树508）。在908，在浏览器中表示DOM（例如，先前参考图1描述并示出的运行表示104）。
在910，跟踪对DOM元素的修改以提供第一改变信息（例如，如先前参考图8描述并示出的改变记录800）。第一改变信息可由DOM修改监听器322 （图3）来提供或通过用户对元素属性和/或样式属性的修改来提供。在912，第一改变信息被应用于标记文本源文档以更新该标记文本源文档。第一改变信息通过首先基于该第一改变信息来更新文档节点树并随后基于该第一改变信息和文档节点树中的文本偏移量来更新标记文本源文档，而被应用于标记文本源文档。
在914，跟踪对标记文本源文档的修改以提供第二改变信息（例如，如先前参考图8描述并示出的改变记录800）。在916，第二改变信息被应用于DOM 元素以更新浏览器中所表示的DOM元素。第二改变信息通过首先基于该第二改变信息来更新文档节点树并随后基于文档节点树来更新DOM和表示该DOM 的查看节点树，而被应用于DOM元素。
各实施例提供了用于将浏览器中表示的DOM元素与用来构造该DOM元素的标记文本源文档中的标记文本相链接的web开发工具。标记文本源文档被逐段解析以构造DOM，使得初始源代码与所构造的DOM元素之间的精确映射得到维护。使用所公开的web开发工具，对应的源代码可基于对运行页面中的 DOM元素的修改而被动态更新，且运行页面中的对应DOM元素可基于对源代码的修改而被动态更新。
尽管此处说明并描述了具体实施例，但本领域技术人员可以理解，可用各种替换和/或等价实现来替换所示出并描述的具体实施例而不背离本发明的范围。本申请旨在覆盖此处讨论的具体实施例的任何改编或变型。因此，本发明旨在仅由权利要求书及其等效方案来限制。

Claims (10)

1.一种用于对运行页面进行动态更新的方法，包括：
解析文本源文档来构造文档节点树，使得所述文档节点树包括所述文档节点树的每一节点的文本偏移量，每一节点的每一文本偏移量指示与所述文档节点树的该节点相对应的相关联的文本在所述文本源文档内的位置；
根据所述文档节点树来构造文档对象模型DOM和表示所述DOM的查看节点树，构造所述查看节点树包括将所述查看节点树映射到所述文档节点树，使得所述DOM的每一元素被链接到所述文档节点树中相关联的对象并从而链接到所述文本源文档内与该对象相关联的文本，从而便于定位所述文本源文档中与对所述DOM的元素的修改相关联的文本，或便于定位所述DOM中与对所述文本源文档的修改相关联的元素；
提供所述DOM的运行表示；以及
以下之一：跟踪对所述DOM的修改以提供第一改变信息以及跟踪对所述文本源文档的修改以提供第二改变信息；
其中所述文档节点树的每一节点的文本偏移量包括行号和在该行内的位置或包者指示字符相对于所述文本源文档的开头的位置的字符号；
其中通过选择所述文本源文档的运行表示内的DOM元素，所述文本源文档中与所选的DOM元素相关联的文本被选择。
2.如权利要求1所述的方法，其特征在于，还包括：
以下之一：将所述第一改变信息应用于所述文本源文档以更新所述文本源文档以及将所述第二改变信息应用于所述DOM以更新所述DOM的运行表示。
3.如权利要求1所述的方法，其特征在于，跟踪对所述DOM的修改包括跟踪DOM变化。
4.如权利要求1所述的方法，其特征在于，所述第一改变信息标识所述文档节点树的与对所述DOM的修改相对应的要编辑、删除、或插入数据的节点。
5.如权利要求1所述的方法，其特征在于，所述第二改变信息标识所述文档节点树的与对所述文本源文档的修改相对应的要编辑、删除、或插入数据的节点。
6.如权利要求1所述的方法，其特征在于，跟踪对所述DOM的修改包括跟踪通过以下之一所应用的用户编辑：属性面板以及对所述DOM的运行表示的直接操纵。
7.如权利要求1所述的方法，其特征在于，将所述查看节点树映射到所述文档节点树包括向所述查看节点树中的每一节点分配一标识符，所述查看节点树的每一标识符映射到所述文档节点树的对应节点，以及
其中所述第一改变信息包括所述查看节点树中的与所述DOM的修改相对应的节点的标识符。
8.如权利要求1所述的方法，其特征在于，还包括：
将多个DOM修改的第一改变信息串行化。
9.如权利要求8所述的方法，其特征在于，还包括：
将经串行化的第一改变信息应用于所述文本源文档以更新所述文本源文档。
10.一种用于对运行页面进行动态更新的方法，所述方法包括：
解析标记文本源文档以构造文档节点树，使得所述文档节点树的每一节点包括文本偏移量和标记文本源文档细节，所述文档节点树的每一节点中的文本偏移量指示所述标记文本源文档内的与所述文档节点树的该节点相对应的相关联的标记文本的位置；
根据所述文档节点树来构造文档对象模型DOM和表示所述DOM的查看节点树，构造所述查看节点树包括将所述查看节点树映射到所述文档节点树，使得所述DOM的每一元素被链接到所述文档节点树中相关联的对象并从而链接到所述文本源文档内与该对象相关联的文本，从而便于定位所述文本源文档中与对所述DOM的元素的修改相关联的文本，或便于定位所述DOM中与对所述文本源文档的修改相关联的元素；
提供所述DOM的运行表示，使得每一DOM元素被链接到与该DOM元素相关联的所述相关联的标记文本，所述链接是经由所述查看节点树和所述文档节点树提供的；
跟踪对DOM元素的修改以提供第一改变信息；以及
跟踪对所述标记文本源文档的修改以提供第二改变信息；
其中所述文档节点树的每一节点的文本偏移量包括行号和在该行内的位置或者指示字符相对于所述文本源文档的开头的位置的字符号；
其中通过突出显示所述标记文本源文档的运行表示内的DOM元素，所述标记文本源文档中与所选的DOM元素相关联的文本被突出显示在所述标记文本源文档内。
CN201280030637.4A 2011-06-23 2012-06-06 对运行页面进行动态更新的方法 Active CN103635897B (zh)

Applications Claiming Priority (3)

Application Number Priority Date Filing Date Title
US13/167,325 2011-06-23
US13/167,325 US10534830B2 (en) 2011-06-23 2011-06-23 Dynamically updating a running page
PCT/US2012/041037 WO2012177394A2 (en) 2011-06-23 2012-06-06 Dynamically updating a running page

Publications (2)

Publication Number Publication Date
CN103635897A CN103635897A (zh) 2014-03-12
CN103635897B true CN103635897B (zh) 2019-04-26

Family

ID=47363027

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201280030637.4A Active CN103635897B (zh) 2011-06-23 2012-06-06 对运行页面进行动态更新的方法

Country Status (6)

Country Link
US (1) US10534830B2 (zh)
EP (1) EP2724258A4 (zh)
JP (1) JP5941540B2 (zh)
KR (1) KR101961970B1 (zh)
CN (1) CN103635897B (zh)
WO (1) WO2012177394A2 (zh)

Families Citing this family (36)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US10534830B2 (en) 2011-06-23 2020-01-14 Microsoft Technology Licensing, Llc Dynamically updating a running page
US10540416B2 (en) 2011-06-23 2020-01-21 Microsoft Technology Licensing, Llc Linking source code to running element
US20130332813A1 (en) * 2012-06-06 2013-12-12 Sap Ag Generic Workspace Awareness Support for Collaborative Web Applications
US9106690B1 (en) * 2012-06-14 2015-08-11 Bromium, Inc. Securing an endpoint by proxying document object models and windows
US9342616B2 (en) 2013-03-04 2016-05-17 International Business Machines Corporation User influenced asynchronous module definition loader
CN103150497B (zh) * 2013-04-07 2016-09-28 网宿科技股份有限公司 Web应用开发的可视化权限配置方法、校验方法和系统
CN104239352B (zh) * 2013-06-20 2018-05-29 国际商业机器公司 一种用于加载网页的方法和系统
JP5991695B2 (ja) * 2013-12-06 2016-09-14 インターナショナル・ビジネス・マシーンズ・コーポレーションＩｎｔｅｒｎａｔｉｏｎａｌ Ｂｕｓｉｎｅｓｓ Ｍａｃｈｉｎｅｓ Ｃｏｒｐｏｒａｔｉｏｎ 文書オブジェクトモデルツリーとカスケーディング・スタイル・シートとが取り出されることが可能なアプリケーションのソースコードを変更することによって生じる影響を検知するための方法、並びに、当該影響を検知するためのコンピュータ及びそのコンピュータ・プログラム
US10372685B2 (en) 2014-03-31 2019-08-06 Amazon Technologies, Inc. Scalable file storage service
US9519510B2 (en) * 2014-03-31 2016-12-13 Amazon Technologies, Inc. Atomic writes for multiple-extent operations
CN104036026B (zh) * 2014-06-27 2018-02-23 吴涛军 存储和定位结构化文档选取内容的方法与系统
US10565293B2 (en) * 2014-08-26 2020-02-18 Adobe Inc. Synchronizing DOM element references
US10614249B2 (en) * 2015-07-01 2020-04-07 Allscripts Software, Llc Sanitization of content displayed by web-based applications
US11194885B1 (en) * 2015-07-07 2021-12-07 Google Llc Incremental document object model updating
CN106469137A (zh) * 2015-08-19 2017-03-01 互联网域名系统北京市工程研究中心有限公司 Xml文档解析方法及装置
CN105630902B (zh) * 2015-12-21 2019-03-26 明博教育科技股份有限公司 一种渲染和增量更新网页的方法
CN106936871B (zh) * 2015-12-30 2020-05-29 阿里巴巴集团控股有限公司 界面展示数据的方法及装置
CN107807927B (zh) * 2016-09-08 2022-04-29 阿里巴巴（中国）有限公司 基于下发规则的页面解析方法、装置、客户端设备及系统
CN107291465A (zh) * 2017-06-14 2017-10-24 北京小米移动软件有限公司 页面显示方法、装置及存储介质
KR102000542B1 (ko) * 2017-11-09 2019-07-16 주식회사 한글과컴퓨터 페이지 변경 편집 명령에 기초하여 돔 객체들을 편집하는 웹 문서 편집 장치 및 이의 동작 방법
US10956508B2 (en) 2017-11-10 2021-03-23 Palantir Technologies Inc. Systems and methods for creating and managing a data integration workspace containing automatically updated data models
US10726091B2 (en) * 2018-05-04 2020-07-28 Siteimprove A/S Dynamic content modifications
KR102091786B1 (ko) * 2018-08-30 2020-03-20 쉬프트정보통신 주식회사 인식표를 사용하여 html 실행 화면과 편집화면의 동기화를 수행하는 방법 및 이를 구현하는 프로그램
CN111475679B (zh) * 2019-01-24 2023-06-23 腾讯科技（深圳）有限公司 Html文档处理方法、页面显示方法和设备
US11003837B2 (en) 2019-05-03 2021-05-11 Microsoft Technology Licensing, Llc Controlling mark positions in documents
CN110309461B (zh) * 2019-07-04 2023-10-27 郑州悉知信息科技股份有限公司 页面展现方法和装置
CN110633465B (zh) * 2019-07-19 2021-04-13 广州视源电子科技股份有限公司 文本序列的修改定位方法及装置、电子设备
CN110807298B (zh) * 2019-09-27 2023-08-08 北京思维造物信息科技股份有限公司 一种对标记信息进行处理的方法及系统
CN111221513B (zh) * 2020-01-03 2023-04-18 北京字节跳动网络技术有限公司 一种调整层叠样式表的方法、装置、介质和电子设备
US11119896B1 (en) 2020-04-30 2021-09-14 Microsoft Technology Licensing, Llc Browser based visual debugging
CN111913705B (zh) * 2020-05-28 2023-07-25 中南大学 一种基于差异更新算法的JavaScript模板实现方法
CN111930616B (zh) * 2020-07-27 2024-03-19 北京大米未来科技有限公司 数据处理方法、装置、电子设备和可读存储介质
CN111857737A (zh) * 2020-07-28 2020-10-30 苏州华望信息科技有限公司 基于SysML模型语义web系统的动静态资源分离方法
CN112328841B (zh) * 2020-11-30 2024-05-31 中国民航信息网络股份有限公司 一种文档处理方法、装置、电子设备及存储介质
CN113094287B (zh) * 2021-05-12 2024-03-15 深圳市腾讯信息技术有限公司 页面兼容性检测方法、装置、设备及存储介质
US20230045426A1 (en) * 2021-08-05 2023-02-09 Yaar Inc. Instruction interpretation for web task automation

Citations (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN1959679A (zh) * 2006-09-25 2007-05-09 北京爱笛星科技有限公司 网页微内容提取、聚合和自动更新系统的方法
CN101685447A (zh) * 2008-09-28 2010-03-31 国际商业机器公司 在Web页面片段剪切和混搭中处理CSS的方法和系统
CN101763432A (zh) * 2010-01-05 2010-06-30 北京大学 一种轻量级网页动态视图快速构建方法

Family Cites Families (37)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US5524190A (en) 1993-06-04 1996-06-04 Taligent, Inc. Command object logging system for restoring documents
US6981211B1 (en) 1999-09-30 2005-12-27 International Business Machines Corporation Method for processing a document object model (DOM) tree using a tagbean
US7207000B1 (en) * 2000-02-24 2007-04-17 International Business Machines Corporation Providing dynamic web pages by separating scripts and HTML code
US6961750B1 (en) 2000-05-18 2005-11-01 Microsoft Corp. Server-side control objects for processing client-side user interface elements
US7047318B1 (en) 2001-04-20 2006-05-16 Softface, Inc. Method and apparatus for creating and deploying web sites with dynamic content
US7111234B2 (en) 2001-05-02 2006-09-19 Microsoft Corporation System and method for in-line editing of web-based documents
US6745208B2 (en) 2001-05-31 2004-06-01 International Business Machines Corporation Method and apparatus for synchronizing an XML document with its object model
US8555261B1 (en) 2001-06-28 2013-10-08 Microsoft Corporation Object-oriented pull model XML parser
AU2002359821A1 (en) 2001-12-21 2003-07-15 Xmlcities, Inc. Extensible stylesheet designs using meta-tag and/or associated meta-tag information
US7316003B1 (en) 2002-12-18 2008-01-01 Oracle International Corp. System and method for developing a dynamic web page
US7096422B2 (en) 2003-02-28 2006-08-22 Microsoft Corporation Markup language visual mapping
US7877399B2 (en) 2003-08-15 2011-01-25 International Business Machines Corporation Method, system, and computer program product for comparing two computer files
CN1871600B (zh) 2003-10-31 2012-11-21 株式会社爱可信 用于提交网页的方法和终端设备
NL1025125C2 (nl) 2003-11-07 2005-05-10 Backbase B V Werkwijze, inrichting en systeem voor het uitbreiden van een mark-up taal.
US7456840B2 (en) 2004-08-31 2008-11-25 Oracle International Corporation Displaying information using nodes in a graph
JP4686177B2 (ja) 2004-12-02 2011-05-18 インターナショナル・ビジネス・マシーンズ・コーポレーション Ｗｅｂページ・オーサリング装置、Ｗｅｂページ・オーサリング方法及びプログラム
US8438551B2 (en) 2005-06-27 2013-05-07 Csc Technology Singapore Pte Ltd Code transformation
US7975020B1 (en) 2005-07-15 2011-07-05 Amazon Technologies, Inc. Dynamic updating of rendered web pages with supplemental content
US7930630B2 (en) 2006-05-31 2011-04-19 Microsoft Corporation Event-based parser for markup language file
US20080082911A1 (en) 2006-10-03 2008-04-03 Adobe Systems Incorporated Environment-Constrained Dynamic Page Layout
CN101165685A (zh) 2006-10-19 2008-04-23 国际商业机器公司 用于生成动态网页的方法及装置
US7895514B1 (en) 2006-10-23 2011-02-22 Adobe Systems Incorporated Systems and methods for solving rendering compatibility problems across electronic document viewers
US8020094B2 (en) 2006-12-06 2011-09-13 Microsoft Corporation Editing web pages via a web browser
US8260790B2 (en) 2007-04-27 2012-09-04 Hewlett-Packard Development Company, L.P. System and method for using indexes to parse static XML documents
KR100958786B1 (ko) 2007-10-08 2010-05-18 엔에이치엔(주) 웹문서 편집 방법 및 장치
US8234564B2 (en) 2008-03-04 2012-07-31 Apple Inc. Transforms and animations of web-based content
US20090228838A1 (en) 2008-03-04 2009-09-10 Ryan Christopher N Content design tool
CN101587488B (zh) 2009-05-25 2011-04-06 深圳市腾讯计算机系统有限公司 一种搜索引擎中页面重定向的检测方法及装置
US8332763B2 (en) 2009-06-09 2012-12-11 Microsoft Corporation Aggregating dynamic visual content
US11102325B2 (en) 2009-10-23 2021-08-24 Moov Corporation Configurable and dynamic transformation of web content
US20110197124A1 (en) 2010-02-05 2011-08-11 Bryan Eli Garaventa Automatic Creation And Management Of Dynamic Content
CN101819596B (zh) 2010-04-28 2011-11-02 烽火通信科技股份有限公司 一种基于内存的xml脚本缓存容器
CN101996252B (zh) 2010-11-17 2013-01-16 浙江省电力公司电力科学研究院 一种解析xml文件时对节点元素的处理方法
CN102033954B (zh) 2010-12-24 2012-10-17 东北大学 关系数据库中可扩展标记语言文档全文检索查询索引方法
US10534830B2 (en) 2011-06-23 2020-01-14 Microsoft Technology Licensing, Llc Dynamically updating a running page
US10540416B2 (en) 2011-06-23 2020-01-21 Microsoft Technology Licensing, Llc Linking source code to running element
US20130227397A1 (en) 2012-02-24 2013-08-29 Microsoft Corporation Forming an instrumented text source document for generating a live web page

Patent Citations (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN1959679A (zh) * 2006-09-25 2007-05-09 北京爱笛星科技有限公司 网页微内容提取、聚合和自动更新系统的方法
CN101685447A (zh) * 2008-09-28 2010-03-31 国际商业机器公司 在Web页面片段剪切和混搭中处理CSS的方法和系统
CN101763432A (zh) * 2010-01-05 2010-06-30 北京大学 一种轻量级网页动态视图快速构建方法

Non-Patent Citations (1)

* Cited by examiner, † Cited by third party
Title
《纯XML数据库研究综述》;冯建华等;《计算机应用研究》;20060601(第6期);全文

Also Published As

Publication number Publication date
WO2012177394A2 (en) 2012-12-27
US20120331375A1 (en) 2012-12-27
EP2724258A4 (en) 2015-02-25
JP5941540B2 (ja) 2016-06-29
EP2724258A2 (en) 2014-04-30
WO2012177394A3 (en) 2013-05-16
JP2014520342A (ja) 2014-08-21
KR101961970B1 (ko) 2019-07-17
KR20140048139A (ko) 2014-04-23
US10534830B2 (en) 2020-01-14
CN103635897A (zh) 2014-03-12

Similar Documents

Publication Publication Date Title
CN103635897B (zh) 对运行页面进行动态更新的方法
US10162738B2 (en) System, method, and computer readable medium for universal software testing
CN103620586B (zh) 将源代码链接到运行元素
US7912846B2 (en) Document processing method, recording medium, and document processing system
US10657323B2 (en) Method of preparing documents in markup languages
US20130227397A1 (en) Forming an instrumented text source document for generating a live web page
JP5413198B2 (ja) ユーザインタフェース認識装置、ユーザインタフェース認識方法およびプログラム
KR20100011912A (ko) Ｘｍｌ 문서를 검증하기 위한 방법 및 시스템
US7720814B2 (en) Repopulating a database with document content
WO2008041366A1 (fr) Dispositif de recherche de document, procédé de recherche de document et programme de recherche de document
US20090083300A1 (en) Document processing device and document processing method
CN113177168A (zh) 一种基于Web元素属性特征的定位方法
US20080005662A1 (en) Server Device and Name Space Issuing Method
US20080005085A1 (en) Server Device and Search Method
US20090083620A1 (en) Document processing device and document processing method
Campesato Angular and Deep Learning Pocket Primer
Campesato Angular and Machine Learning Pocket Primer
Vassilakis et al. A heuristics-based approach to reverse engineering of electronic services
Sanderson SportsStore: A Real Application
Gardner CSS, JavaScript, and Ajax
JP2005149249A (ja) 命令生成装置、データベースシステム、命令生成方法およびそのプログラム
IE83995B1 (en) Development of software systems

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
C10 Entry into substantive examination
SE01 Entry into force of request for substantive examination
ASS Succession or assignment of patent right

Owner name: MICROSOFT TECHNOLOGY LICENSING LLC

Free format text: FORMER OWNER: MICROSOFT CORP.

Effective date: 20150728

C41 Transfer of patent application or patent right or utility model
TA01 Transfer of patent application right

Effective date of registration: 20150728

Address after: Washington State

Applicant after: Micro soft technique license Co., Ltd

Address before: Washington State

Applicant before: Microsoft Corp.

GR01 Patent grant
GR01 Patent grant