Web页工具 - 使用DOM Inspector搜索节点

使用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搜索页面主图片的结果

　　你还能在右上方的信息窗格中发现更多功能。对于结构化视图窗格中选中的节点，这个窗口会显示有关该节点的各类信息。上方标题区中的下拉列表图标用于切换信息的类型，可选的信息类型包括DOM Node、Box Model、XBL Bindings、CSS Style Rules、Computed Style和JavaScript Object。当使用Mozilla的XML用户界面语言（XML User Interface Language，XUL）工具包开发应用时，Box Model和XBL Bindings信息类型更有用。

　　DOM Node信息类型会显示有关节点的基本信息，如其标记名、节点值，以及节点的属性。右键点击一个节点会显示一个上下文菜单，选择其中的Edit菜单项就可以修改节点属性的值。例如，可以选择一个font（字体）节点，修改size（大小）属性。如图5-10所示，使用这种技术可以增大Google搜索页面中输入框上方的字体大小。

　　JavaScript Object信息类型会列出所选节点可用的DOM属性和方法。如果要确定一个特定DOM节点有哪些可用的属性和方法，这就是一个很有用的特性。例如，除了一般的正常方法外（如appendChild），对于表格节点还会列出诸如insertRow和deleteRow的方法。

　　图5-10　使用DOM Inspector，动态修改输入框上方的字体大小

　　如果设置为JavaScript Object信息类型，则在信息窗格中右键点击就会显示一个带有Evaluate JavaScript菜单项的上下文菜单。选择这个菜单项会弹出一个窗口，可以针对所选节点计算一个JavaScript表达式。图5-11显示了针对Google搜索页面的body（体）节点打开的JavaScript计算窗口，可以看到，如果执行计算窗口所示的JavaScript表达式，就会在页面的最后追加指定的文本。注意target作为变量名，它指示所选的节点，在这里就是body元素。

　　图5-11　使用JavaScript计算窗口在页面的体中动态增加一个文本节点（左图），以及浏览器窗格中的结果（右图）

　　CSS Style Rules和Computed Style信息类型会显示所选节点样式规则的有关信息。Computed Style信息类型会列出浏览器的呈现引擎所看到的所有与样式相关的属性，包括使用style属性显式设置的样式，在外部CSS文件中指定的样式，或者从父节点继承的样式。

　　前面已经简要地了解了DOM Inspector的特性，可以想像，在你的开发环境中，这必将是一个非常有用的工具。你可以使用DOM Inspector来检查通过document.createElement方法动态创建的DOM节点，以确保具有所需的属性值。如果一个特定节点没有应用你希望的样式规则，也可以使用DOM Inspector来找出原因。随着越来越熟悉DOM Inspector的功能，你肯定会发现DOM Inspector在Web开发过程中将是一个举足轻重的强大工具。