加载中…
DOMInspector介绍
(2007-12-05 10:10:11)
标签：
IT/科技dominspector |
[b]DOM[/b]
根据 W3C DOM 规范，DOM 是一种与浏览器，平台，语言的接口，使得你可以访问页面其他的标准组件。简单理解，DOM 解决了 Netscaped 的 Javascript 和 Microsoft 的 Jscript 之间的冲突，给予 web 设计师和开发者一个标准的方法，让他们来访问他们站点中的数据、脚本和表现层对像。
DOM的详写是Document Object Model，即文档对象模型。DOM是一个浏览器解释网页生成的一个树式对象，这有点象我们平时使用的目录树。它有一个根节点，这个根节点通常是DOCUMENT，并且有很多子节点。每个节点都有自己的属性与路径（这里的路径只是为与目录树类比才这样说，实际上DOM节点并没有所谓的“路径”，但我们也能像目录树一样定位到某个DOM节点并进行操作）。浏览器提供操作DOM的API，网页设计者可以通过这些 API来操作DOM对象，比如增加，删除节点与修改节点属性。
当我们使用浏览器打开一个网页时，浏览器首先会发送请求到服务器下载网页文档，下载到数据后，浏览器并没有把网页直接翻译成我们平时看到的超文本格式，而是调用内置的解释器，在内存中把文档生成为一个DOM对象树，再通过这个对象翻译成超文本格式。由于不同的浏览器由于技术与对标准的支持不同，生成的 DOM树也不尽相同。如果网页中有操作DOM对象的相关脚本代码，浏览器就会按照脚本更新DOM树。
在很多介绍DOM的教程中，对于DOM的说明都是很理论的，因为很多浏览器本身并没有提供让用户可视化操作DOM的工具，而DOM Inspector，就恰恰是这样一款为可视化查看和操作DOM的工具。
[b]DOM Inspector[/b]
DOM Inspector使用
一般的FireFox或Mozilla安装包都自带了DOM Inspector，但并不是默认安装，如果大家想在FireFox使用 DOM Inspector，建议大家到http://www.mozilla.org/products/firefox/all.html下载最新的 FireFox，在安装时选[自定义]，选上所有工具包，这样就安装好DOM Inspector。
下面我们用一个HTML来说明一个DOM Inspector的使用。先用FireFox打开附带程序的main1.html，这个网页打开后， FireFox会自动为它生成一个DOM对象，这时我们可以用DOM Inspector查看，DOM Inspector在[工具]->[DOM 查看器]，你也可以按Ctrl+Shift+I打开DOM Inspector。
大家看到左边的那个类目录的层式结构吗？这就是传说中的DOM树！！以#document为根元素，然后是HTML标签，下面的HEAD， TITLE，BODY，H1，UL，LI都井然有序地为我们排好了。试试选中某个元素，在FireFox的网页中对应的元素就会闪动，点击某个元素，它的节点名称，属性或内容就会在右边的属性窗口显示出来。但是左窗口还有一些本不应该存在的#text，它们是文本节点，比如<title> Hello</title>里的Hello，一些标签没有文本（像水平条<hr/>），但DOM Inspector也认为它们有一个空的文本节点，如果大家觉得碍眼，可以把[查看]->[显示空白节点]勾掉。
有很多所谓的网页加密，都是用document.write()函数在源文件写代码做出来的，以为这样就可以挡住入侵者，其实不然，前面的理论告诉我们，加密网页在被浏览器解释时，会生成DOM树，浏览器关心的是DOM对象而非HTML源码。在main1.html中，第三个LI元素就是用这种方法加入的，因为FireFox最后的显示效果是根据DOM生成的，所以在DOM Inspector中，我们就可以看到第三个LI，而不是单纯的一个 SCRIPT元素（用于动态加入第三个LI）。
当然了，DOM Inspector不只能查看DOM，还可以修改！我们可以选中任一个元素，按DEL就可以把它删掉。这里我把HR元素与第二项删了。大家可以看到下面图中的HR（水平条）与LI＿2不见了。
我们还可以复制、剪切元素，例如要重新加入LI＿2，只要选中LI_1，按复制，再选中LI_1，按粘贴，这就完成了LI_1复制。但是这时新的LI只是LI_1的一个副本，并不是LI_2呀，不用担心，下面我们就来为新LI整容。
其实，这个例子中LI间的不同主要只是ID与显示的文本内容不同罢了。那么我们先搞定ID，选中新LI，在右窗口的左上角有一个下拉框，按一下可以选择查看选中元素的方式：Javascript Object，DOM Node或其它。DOM Node里可以看到的是选中标签的属性，而在 Javascript Object里则是把选中的元素在DOM生成的节点对象。因为id属性是写在<li>标签里的，所以用 DOM Node模式。
可以看到，新LI的id是LI_1，在其中右键点击[编辑]，输入新值"LI_2"就可以完成修改。但是，如何修改文本内容呢，我们好像看不到这样的选项。不用怕，精彩在后头。
浏览器为了把DOM提供给网页开发者，把DOM生成一个对象，以便网页开发者使用，其中每一个节点又是一个很完整的对象，节点对象保存了节点的大量信息，除了id，还有像class（类），value（值），textContent（文本内容）一类的信息。什么？文本内容，没错，就是文本内容，下面我们通过操作Javascript object的方法搞定它！
像改ID一样，选中LI_2，在属性窗口左上选Javascript object，展开target对象，所有的节点属性尽在眼底。可以看到textContent还是“第一项”。右击target，选[运行Javascript]，弹出窗口。
这时我们可以输入Javascript语句修改属性，当前选中项（LI_2)已被设为target。输入target.textContent="第二项"，按执行看看，成功。
[b]DOM Inspector的其它应用[/b]
由于篇幅关系，不能详细介绍DOM Inspector。DOM Inspector是否好用的判别标准，因使用者的Javascript水平而异。我们可以看到DOM Inspector单独的可视化应用是有局限的，但如果用户对DOM_API掌握得好，通过操作Javascript object 可以说没有什么做不到。
在国外，DOM Inspector是被网页开发者使用得很广泛的，而国内连知道有这东东的人都不多。它除了让网页开发者检查自己的网页是否出错，在黑客方面也是很值得研究的，比如可以轻松地取消某个表单元素的限制，下载被加密的文件等。联合Venkman使用，更是在前台方面所向无敌。本文仅通过介绍 DOM Inspector，抛砖引玉，吸引大家加入Mozilla开发阵营罢。
如果想学习DOM，大家可以到www.xulplanet.com找到相关文档，至于DOM Inspector的提高应用，可以到http://www.brownhen.com/DI.html看到相关资料。撰此文时，我找到另一个很好用的东东MODLv2，安装很简单：打开http://slayeroffice.com/tools/modi/v2.0/modi_help.html，右击 Bookmark this link for MODIv2，选“将此链接加入到书签”。以后打开网页时，打开此书签（是一段Javascript 的），就会弹出一个DOM查看器，这个可是“即指即译”的哦！
根据 W3C DOM 规范，DOM 是一种与浏览器，平台，语言的接口，使得你可以访问页面其他的标准组件。简单理解，DOM 解决了 Netscaped 的 Javascript 和 Microsoft 的 Jscript 之间的冲突，给予 web 设计师和开发者一个标准的方法，让他们来访问他们站点中的数据、脚本和表现层对像。
DOM的详写是Document Object Model，即文档对象模型。DOM是一个浏览器解释网页生成的一个树式对象，这有点象我们平时使用的目录树。它有一个根节点，这个根节点通常是DOCUMENT，并且有很多子节点。每个节点都有自己的属性与路径（这里的路径只是为与目录树类比才这样说，实际上DOM节点并没有所谓的“路径”，但我们也能像目录树一样定位到某个DOM节点并进行操作）。浏览器提供操作DOM的API，网页设计者可以通过这些 API来操作DOM对象，比如增加，删除节点与修改节点属性。
当我们使用浏览器打开一个网页时，浏览器首先会发送请求到服务器下载网页文档，下载到数据后，浏览器并没有把网页直接翻译成我们平时看到的超文本格式，而是调用内置的解释器，在内存中把文档生成为一个DOM对象树，再通过这个对象翻译成超文本格式。由于不同的浏览器由于技术与对标准的支持不同，生成的 DOM树也不尽相同。如果网页中有操作DOM对象的相关脚本代码，浏览器就会按照脚本更新DOM树。
在很多介绍DOM的教程中，对于DOM的说明都是很理论的，因为很多浏览器本身并没有提供让用户可视化操作DOM的工具，而DOM Inspector，就恰恰是这样一款为可视化查看和操作DOM的工具。
[b]DOM Inspector[/b]
DOM Inspector使用
一般的FireFox或Mozilla安装包都自带了DOM Inspector，但并不是默认安装，如果大家想在FireFox使用 DOM Inspector，建议大家到http://www.mozilla.org/products/firefox/all.html下载最新的 FireFox，在安装时选[自定义]，选上所有工具包，这样就安装好DOM Inspector。
下面我们用一个HTML来说明一个DOM Inspector的使用。先用FireFox打开附带程序的main1.html，这个网页打开后， FireFox会自动为它生成一个DOM对象，这时我们可以用DOM Inspector查看，DOM Inspector在[工具]->[DOM 查看器]，你也可以按Ctrl+Shift+I打开DOM Inspector。
大家看到左边的那个类目录的层式结构吗？这就是传说中的DOM树！！以#document为根元素，然后是HTML标签，下面的HEAD， TITLE，BODY，H1，UL，LI都井然有序地为我们排好了。试试选中某个元素，在FireFox的网页中对应的元素就会闪动，点击某个元素，它的节点名称，属性或内容就会在右边的属性窗口显示出来。但是左窗口还有一些本不应该存在的#text，它们是文本节点，比如<title> Hello</title>里的Hello，一些标签没有文本（像水平条<hr/>），但DOM Inspector也认为它们有一个空的文本节点，如果大家觉得碍眼，可以把[查看]->[显示空白节点]勾掉。
有很多所谓的网页加密，都是用document.write()函数在源文件写代码做出来的，以为这样就可以挡住入侵者，其实不然，前面的理论告诉我们，加密网页在被浏览器解释时，会生成DOM树，浏览器关心的是DOM对象而非HTML源码。在main1.html中，第三个LI元素就是用这种方法加入的，因为FireFox最后的显示效果是根据DOM生成的，所以在DOM Inspector中，我们就可以看到第三个LI，而不是单纯的一个 SCRIPT元素（用于动态加入第三个LI）。
当然了，DOM Inspector不只能查看DOM，还可以修改！我们可以选中任一个元素，按DEL就可以把它删掉。这里我把HR元素与第二项删了。大家可以看到下面图中的HR（水平条）与LI＿2不见了。
我们还可以复制、剪切元素，例如要重新加入LI＿2，只要选中LI_1，按复制，再选中LI_1，按粘贴，这就完成了LI_1复制。但是这时新的LI只是LI_1的一个副本，并不是LI_2呀，不用担心，下面我们就来为新LI整容。
其实，这个例子中LI间的不同主要只是ID与显示的文本内容不同罢了。那么我们先搞定ID，选中新LI，在右窗口的左上角有一个下拉框，按一下可以选择查看选中元素的方式：Javascript Object，DOM Node或其它。DOM Node里可以看到的是选中标签的属性，而在 Javascript Object里则是把选中的元素在DOM生成的节点对象。因为id属性是写在<li>标签里的，所以用 DOM Node模式。
可以看到，新LI的id是LI_1，在其中右键点击[编辑]，输入新值"LI_2"就可以完成修改。但是，如何修改文本内容呢，我们好像看不到这样的选项。不用怕，精彩在后头。
浏览器为了把DOM提供给网页开发者，把DOM生成一个对象，以便网页开发者使用，其中每一个节点又是一个很完整的对象，节点对象保存了节点的大量信息，除了id，还有像class（类），value（值），textContent（文本内容）一类的信息。什么？文本内容，没错，就是文本内容，下面我们通过操作Javascript object的方法搞定它！
像改ID一样，选中LI_2，在属性窗口左上选Javascript object，展开target对象，所有的节点属性尽在眼底。可以看到textContent还是“第一项”。右击target，选[运行Javascript]，弹出窗口。
这时我们可以输入Javascript语句修改属性，当前选中项（LI_2)已被设为target。输入target.textContent="第二项"，按执行看看，成功。
[b]DOM Inspector的其它应用[/b]
由于篇幅关系，不能详细介绍DOM Inspector。DOM Inspector是否好用的判别标准，因使用者的Javascript水平而异。我们可以看到DOM Inspector单独的可视化应用是有局限的，但如果用户对DOM_API掌握得好，通过操作Javascript object 可以说没有什么做不到。
在国外，DOM Inspector是被网页开发者使用得很广泛的，而国内连知道有这东东的人都不多。它除了让网页开发者检查自己的网页是否出错，在黑客方面也是很值得研究的，比如可以轻松地取消某个表单元素的限制，下载被加密的文件等。联合Venkman使用，更是在前台方面所向无敌。本文仅通过介绍 DOM Inspector，抛砖引玉，吸引大家加入Mozilla开发阵营罢。
如果想学习DOM，大家可以到www.xulplanet.com找到相关文档，至于DOM Inspector的提高应用，可以到http://www.brownhen.com/DI.html看到相关资料。撰此文时，我找到另一个很好用的东东MODLv2，安装很简单：打开http://slayeroffice.com/tools/modi/v2.0/modi_help.html，右击 Bookmark this link for MODIv2，选“将此链接加入到书签”。以后打开网页时，打开此书签（是一段Javascript 的），就会弹出一个DOM查看器，这个可是“即指即译”的哦！
喜欢
0
赠金笔
前一篇：IE/FF的表单元素获取问题