Ajax基础教程（5）- 5.3 使用DOM Inspector搜索节点

　　要在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搜索页面中输入框上方的字体大小。