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