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

　　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开发过程中将是一个举足轻重的强大工具。