3.3. 用 DOM 查看器查看元素 [深入浅出 Greasemonkey]

3.3. 用 DOM 查看器查看元素

DOM 查看器能够查看任何页面的已解析的文档对象模型(DOM)。可以获得每个 HTML 元素、属性和文本节点的详细信息；也可以看到每个页面样式表中的所有 CSS 规则；也可以看到每个对象的所有脚本属性。它的功能非常强大。

DOM 查看器包含在 Firefox 的安装程序中，但是由您的平台而定，它可能默认没装。如果您在工具 (T)菜单中看不到DOM 查看器(N)，那么您需要重新安装 Firefox。重新安装 Firefox 不会影响您现有的书签，设置，扩展以及用户脚本。

过程 3.2. 安装 DOM 查看器

运行 Firefox 的安装程序。
接受用户协议后，选择定制 (C)安装。
选择安装路径后，安装向导会询问安装的组件。选择开发工具。
安装结束后，运行 Firefox。您会看到工具 (T) → DOM 查看器 (N)。

下面我们将要访问深入浅出 Greasemonkey的主页，让您了解 DOM 查看器的强大功能。

过程 3.3. 查看和编辑深入浅出 Greasemonkey的主页

✪观看录像：DOM 查看器示范。

访问http://www.firefox.net.cn/dig/。
在菜单中，选择工具 (T) → DOM 查看器 (N)打开 DOM 查看器。
在 DOM 查看器的左侧视图中，会看到 DOM 节点的树状图。如果看不到，打开左上角的下拉菜单，选择DOM Nodes。
DOM 的树状列表从 document 节点开始，标记为 #document。展开此节点，可以看到 HTML 节点。
展开 HTML 元素后可以看到三个节点：HEAD、#text 和 BODY。注意 BODY 的 id 为 diveintogreasemonkey-org。如果没看到，调整一下列宽度。
展开 BODY 可以看到五个节点： #text, DIV id="intro", #text, DIV id="main" 和 #text。
展开 DIV id="intro" 可以看到两个节点： #text 和 DIV class="sectionInner"。
展开 DIV class="sectionInner" 可以看到两个节点： #text 和 DIV class="sectionInner2"。
展开 DIV class="sectionInner2" 可以看到五个节点： #text, DIV class="s", #text, DIV class="s" 和 #text。
展开第一个 DIV class="s" 可以看到五个节点： #text, H1, #text, P 和 #text。
选择 H1 节点。在原始页面上(DOM 查看器后面)， H1 元素会闪现红色的边框。在右侧面板中可以看到节点的名称(“H1”)、命名空间 URI (空白，因为 HTML 没有命名空间 -- 只有在页面被当作 application/xhtml+xml 时有效，或者显示一些其他名字空间 XML 的页面)、节点类型(1代表元素)和节点值(空白，因为标题没有值 -- 标题上的文字有自己的节点)。
在右侧面板的顶部，有个下拉菜单，在其中可以看到数个选项：DOM Node, Box Model, XBL Bindings, CSS Style Rules, Computed Style 和 Javascript Object。它们提供了当前选中的节点的不同信息。有些是可以修改的，变更会立即反映到原始页面上。选择 Javascript Object 可以看到选中的 H1 元素的所有可脚本控制的的属性和方法。
选择 CSS Style Rules。右侧面板会分为两部分，顶部的列出了所有可以作用于这个元素的样式(包括浏览器已有的默认样式)，下面的显示了样式所定义的属性。
在右上方的视图中选中第二条规则，这条样式规则是在 http://www.firefox.net.cn/dig/css/dig.css 样式表中定义的。
在右下面板中双击 font-variant 属性，然后输入新值： normal。在原始页面中(DOM查看器后面)，“深入浅出 Greasemonkey” 标志文字会立即从 small-caps 变为正常的大小写字母。
在右下面板中任意位置点击右键(Mac 用户 control-click)，然后选择 新建属性。会弹出一个对话框：“新样式规则”。输入属性名称： background-color，然后点击确定，接下来属性值：red，然后点击确定应用新属性。新属性会显示在右下面板中，并且原始页面会立即变成红色背景。

如果觉得依次展开 DOM 节点树中每层很不方便，那么我强烈推荐您使用 Inspect Element 扩展，它能迅速找到 DOM 查看器中的指定元素。

安装 Inspect Element 扩展前，您必须先安装 DOM 查看器，否则 Firefox 就不能正常启动。如果已经遇到了这种情况，打开命令行窗口，进入 Firefox 的安装目录，输入 firefox -safe-mode 。Firefox 会以安全模式启动，不加载任何扩展，然后选择工具 (T) → 附加软件 (A)接着卸载 Inspect Element。

过程 3.4. 用 Inspect Element 直接查看元素

✪观看录像：Inspect Element 示范。

访问 Inspect Element 下载页面，然后点击 Install Now。
重新启动 Firefox。
再访问http://www.firefox.net.cn/dig/。
右击(Mac 用户 control-click) 标志语：深入浅出 Greasemonkey。
在上下文菜单中，选择 Inspect element。.DOM 查看器会打开，并且选中了 H1 元素，然后您可以马上开始查看和/或编辑它的属性。

DOM 查看器不会“跟着”您一起浏览网页。如果打开 DOM 查看器然后在原始窗口中浏览别的网页，DOM 查看器会变得非常困惑。好的做法是，去您想去的地方，查看您想查看的页面，在做别的事情前先关闭 DOM 查看器。

参考资料

DOM 查看器介绍
Inspect Element 扩展
Inspector Widget 扩展具有 Inspect Element 相同功能的扩展，它增加了一个工具条，而不是一个菜单项。

← 用 GM_log 记日志

用 Javascript Shell 计算表达式 →