3 使用DOM Inspector搜索节点
在Mozilla Suite和Firefox浏览器中打包了一个DOM Inspector工具。如果利用DOM Inspector，则可以查看Web页面的结构化表示，甚至能搜索某些特定的节点，并自动更新DOM中的节点。在Firefox中，你可以通过Tools菜单项来访问DOM Inspector。要使用DOM Inspector来检查一个Web页面，需要在文本框中输入所需的URL，并点击Inspect框；或者也可以从File→Inspect a Window菜单选择一个窗口，这就会列出当前在浏览器中打开的Web页面（见图5-7）。
图5-7 DOM Inspector主窗口
DOM Inspector主窗口有3个窗格。左上窗格是Web页面DOM的一个层次结构视图。根元素往往是文档本身，Web页面中的每个节点都列在这个根元素下面。对于大多数Web页面，根节点几乎都是HTML。如果在结构化视图窗格中选择了一个节点，右上窗格会给出这个节点的详细信息。如果主窗口下部没有打开一个浏览器窗口，则可以选择View→Browser菜单项打开一个浏览器窗口。
'
DOM Inspector是一个功能强大的工具，利用这个工具，你可以快速地遍历给定Web页面的结构和视图，并修改Web页面DOM中的各个节点。通常，可以通过结构化视图中的菜单项手工地查找节点，也可以使用Search→Find Nodes菜单项来查找各个节点。利用这个搜索功能，你可以根据ID属性、标记名或属性名和值来查找节点（见图5-8）。
要在DOM Inspector中查找节点，最容易的方法是使用鼠标。在结构化视图中查找一个节点时，可以选择Search→Select Element by Click菜单项，并点击浏览器窗口中的这一项。所选项会以红色边框突出显示，而且在结构化视图窗格中选中相应的节点。
一旦在结构化视图窗格中选中一个特定节点，你就可以开始检查和修改它的属性了。例如，可以右键点击一个节点，从上下文菜单中选择Cut，再选择结构化视图窗格中的另一个节点，右键点击，从上下文菜单中选择Paste，这样就能在DOM中将所选节点有效地从一处移到另一处。图5-9显示了使用这种方法可以将Google搜索页面上的主图片移到页面的另一个部分。
图5-9 使用DOM Inspector移动Google搜索页面主图片的结果
本文作者: