|
阅读：28912回复：23
稍微介绍一下DOM Inspector的用法
【声明】1、此扩展对于扩展开发和主题制作的人士有极大的疗效，而对于我们这些只用于简单修改页面和ff界面的菜鸟们疗效甚微，但有强健体格的功效！ 2、这里我只是稍微介绍一下DOM Inspector的简单用法，由于水平极为有限，更深入的用法爱莫能助！
【简介】DOM Inspector 是一个用来查看和编辑网页文档和XUl应用程序的DOM的工具。在firefox默认情况下不安装此扩展，如果要安装，可以在firefox安装界面中选择自定义，勾选开发工具安装即可。安装完毕之后，在”工具“菜单下面找到“DOM查看器”即可打开了。好了，让我们进入DOM Inspector把。 【界面】界面是左右结构有点像我们浏览器。主界面如下图： 
上方是菜单栏菜单，下面是地址栏，可以输入xul界面的url或者是网页的url来打开其DOM结构。在下面左边窗口就是DOM结构显示了，可以以树形结构来显示xul或网页的标签，也就是节点！右边就是节点的信息了。
节点信息下拉菜单包括4项：1.DOM Node 可显示当前网页或者xul界面的节点信息，包括节点名称，URI等信息。2.Box Model 它是mozilla应用程序的界面布局系统，可显示box元素是如何布局和定位的。3.XBL Bindings 显示当前内容的XBL 绑定。4.CSS Style Rules 显示当前网页或XUL界面的css信息，对于修改元素css样式有很大帮助。5.Computed Style 显示元素的所有样式规则。6.JavaScript Object 显示元素所有javascript动作。 【使用】1、打开xul界面：（如firefox）可以定位到菜单“文件”－－查看一个窗口，弹出菜单显示了当前打开的所有xul界面，默认是firefox的界面和DOM查看器的界面。这里我们打开firefox的界面，则在下面的节点界面上显示了firefox界面所有的节点元素，可以通过点加号依次展开查看。节点对应的firefox界面项目会被红色的方框围住并闪烁，右侧显示的是节点的所有信息。
2.打开某个网站：可以定位到菜单“文件”－－查看一个URL，在对话框中输入网页URL地址，确定后就在下面节点窗口中显示了网页的DOM结构，最上方当然是html节点了，学过网页的都知道任何一个网页最外面的标签都是<html>。通过加号依次展开节点就可以查看了。 3.查找节点：定位“查看”－－查找节点，在弹出对话框输入栏输入节点名称，类型可以通过ID，属性和标记来缩小查找范围。
4.动态修改DOM：找到某个要找的节点后在右侧信息窗口中的下拉菜单中选择某项，比如css style rules，定位到要修改的css元素，右键点击选“编辑”进行修改，然后刷新网页或者重启浏览器就可以马上看到修改的效果了。
还有一些使用方法这里就不介绍了 【实例】实例1修改下面这个帖子讨论的问题 FF按钮栏里面的这几个按钮怎么去掉啊!!! 对于绿色箭头的转到按钮，打开DOM Inspector，在文件－－查看一个窗口中选择firefox的窗口，点击地址栏最左边的按钮 ，然后切换到ff窗口点击哪个绿色箭头的转到按钮，则按钮会被红色方框围住并闪烁显示，同时在节点窗口中会自动定位到转到按钮的节点位置，如下图
要表示该节点，图中它的go－button信息是Id，则用css表示则是#go-button，如果是class，则用css表示是.go-button，这里是Id，则是#go-button。 好了，要去掉它，则在userchrome.css文件或者style扩展新建样式中输入#go-button{display:none !important;}保存重启ff即可看到效果。 通过上面方法可以查看搜索栏的其它两个按钮是.search-go-button和.searchbar-engine-button，则用下面css代码即可 #go-button { display:none; }
.search-go-button { display:none; }
.searchbar-engine-button { display:none; }实例2取消pconline的图片广告 随便打开一个具有图片广告的网页，比如http://www.pconline.com.cn/pcedu/pingce/0609/860217.html 这里我们要用Inspect this扩展来查看这个广告的节点信息，安装好扩展后会在右键菜单集成”检查元素“选项，这个扩展是使用DOM Inspector来打开任意的网页节点的好扩展。在广告上面右键点击选择“检查元素”，然后在节点窗口中就可以看到该节点，点击不同节点可以在网页上显示红色方框，如图 我们现在就可以写css代码来取消之。 @-moz-document domain("pconline.com.cn") {
.article > div{display:none;}
}
将此代码添加到usercontent.css文件中或者直接用stylish扩展为这个域名新建样式。 重启ff即可看到效果，从而就屏蔽了它。
上面写的css大家不明白可以去网站找css的教程，我说的都是非常基础的用法。 好了，这些基础的修改方法我已经全部都老实交代了，要我再继续交代我也只能喊冤了：我不知道了，放了我把！ |
|
最新喜欢： vansky
|
|
1楼#
发布于：2006-09-04 14:46
看不懂 飘过
|
|
|
|
2楼#
发布于：2006-09-04 14:46
不加精还等着干什么呢~
快！ |
|
|
|
3楼#
发布于：2006-09-04 14:46
。。。。。。。。。。。
小样！ 这就是我的三板斧了 cross别再说我的css咋地咋地 就这样了！吃奶的都用出来了 |
|
|
|
4楼#
发布于：2006-09-04 14:46
有更简便直观的方法，就是Ctrl+鼠标点击，然后右键view selection source
例如上面的adblock广告规则就是#ul(style*=margin: 0px; padding: 0px;) |
|
|
|
5楼#
发布于：2006-09-04 14:46
!设精！
|
|
|
|
6楼#
发布于：2006-09-04 14:46
学习了。
|
|
|
|
7楼#
发布于：2006-09-04 14:46
同样学习了，我一直以为是个看xml文件的扩展呢，原来还可以做这么多的事情呀
 |
|
|
|
8楼#
发布于：2006-09-04 14:46
|
|
|
|
9楼#
发布于：2006-09-04 14:46
又要学习了。哈哈。
谢谢分享。 |
|
|
10楼#
发布于：2006-09-04 14:46
学习了
|
|
|
|
11楼#
发布于：2006-09-04 14:46
图片没有了 ，能不能把说明图片再弄上呀，要不看得不太懂呀
谢谢 |
|
|
12楼#
发布于：2006-09-04 14:46
图片没问题啊
|
|
|
|
13楼#
发布于：2006-09-04 14:46
|
|
|
|
14楼#
发布于：2006-09-04 14:46
DOMi 用来查看 XUL 界面元素再好不过这点 Firebug 无法做到。
|
|
|
上一页
下一页
