UML软件工程组织

Ajax基础教程 -5.3 使用DOM Inspector搜索节点
作者:(美)阿斯利森 舒塔   出处:csdn

5.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)。

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

 

上一页     首页    下一页

 

版权所有:UML软件工程组织