之所以在这里首先介绍dom模型,主要是两个原因,首先是dom模型把整个文档当做一个把各种元素通过节点联系起来的节点树,这样分类后可以很清晰地看到整个页面的结构和相互联系.其次是大多调试工具都可以利用dom来动态的操作元素,可以即时地看到修改后的结果.
基于以上原因,这个内容无论是做设计还是只是简单修改代码,都必须掌握.
关于dom的又臭又长的定义和历史,我想没有必要再让大家来研究了,有兴趣可以去网上自己找资料.
我们只要了解这几点,首先DOM(Document Object Model)，文档对象模型，是面向HTML和XML的应用程序接口,与语言浏览器等等没有关系，但是可以利用其访问并修改页面的元素.
然后就是DOM将文档规划成由多个相互连接的节点级构成的文档，文档中的每个部分都可以看作是一个节点的衍生物。

1，在chrome浏览器查看页面结构。
chrome是一款一旦使用了就放不下的优秀无比的浏览器，本公子最开始是打算看看这个谷歌到底有个什么好的，结果后来才发现这个的博大精深，结果彻底深陷，把所有的东西都转投到谷歌门下，包括邮箱浏览器搜索引擎到后来的手机系统。
在帮助设计人员调试网页的方面，他们做了一个小小的附加功能，包括dom tree的查看，操作，式样调试，网页元素查看，速度比对，大小比对，JS调试……这个小小的附加，一举超越其他所有的专业工具。。。让人不得不对他们膜拜到五体投地。。。（FF，乃们都可以去屎了）
在这里我只简单说说在chrome下的dom树的查看。
在自己需要查看的位置，把鼠标移到这个上面，比如我要查看首页的按钮位置的网页代码的位置，和其相关CSS式样。
1》，把鼠标移到按钮上，右键单击，在菜单栏里选择最后一个审查元素，单击，就会出现一个弹出调试窗口（也有可能是在页面下方出现的，如果不习惯可以点击左下角的一个重叠的方形按钮，以便弹出窗口）
2》，大家可以看到这个窗口,左边为相应的页面，右边为对应的CSS式样。


从上面的操作我们可以获得如下信息，首先，可以得到与页面这个元素相关的页面结构信息，以反选高亮的方式表达，位于调试窗的左边。第二，左边选好的元素的区域，又会以淡蓝色覆盖，这个表示的是与其相关的区域的范围，在这里大家还可以看到，这个区域里用框架隔开的，这里是由CSS里面的padding和margin决定的，这个内容将会在下面的框模型里详细介绍。


在实际操作中，我们也可以通过这样的方法来获取页面对应元素的位置，代码以及区域。
在DISCUZ中，由于采用模板和代码分离的技术，其HTML代码大多放在templates文件夹里，这是一种DISCUZ独有的模板编译方法，所以他们和正常的HTML代码有些不同，同时，CSS代码也有些许改变，这个以后会详细介绍（由于这个模板引擎很不错，已经有高手将其独立出来了，比如phpnew，我也在用）
比如以后我们需要修改某一个地方，就可以使用这个工具找到对应的结构，直接在模板文件夹里寻找相应代码，或者CSS对应的选择器（这个显示出来的选择器也有些许修改，后面会介绍的）。
这个方法是我们修改模板的首要工作，寻找需要修改的代码的位置。希望大家都能够掌握。接下来我还会为大家介绍在OPERA,FF,IE等中如何定位。

2，在OPERA浏览器中使用DOM工具查看页面元素
我使用的是最新的opera桌面浏览器，由于它的使用范围也很广泛，一般大家做完一个风格后，都需要使用opera打开各个页面看一下是否有错位或者其他问题出现。如果发现了错误，可以使用这个工具便捷地实时动态调试。
1》，首先我们来看看如何打开调试工具，比如打开discuz的论坛首页，在页面的任意位置右键单击，选择菜单栏里的检查元素，便可在下方出现一个调试框，当然我个人喜欢把这个弹出来，点击调试框右上方的双口标志，看到如下界面：


从这个界面来看，和chrome的有几分相似，但是少了很多特色功能，比如元素的加载时间等。这个默认是只要鼠标移到上面也可以看到相应的块状结构的范围。我个人觉得和IE的调试器有几分相似。左边是用DOM TREE的方式查看页面，右边是相应的式样。这个也可以支持动态修改，比如我们来修改把首页发帖按钮的padding-top的值，如下图，在这个值的上面双击就可以了，出现编辑框，修改成50px看看效果。大家都来操作一下感受一下吧~~

是不是也是很方便呢~~
这个调试工具貌似我一直没有发现能对左边的元素进行操作的方法。
这里课的目的只是为了了解这个动态的dom操作，就不深入了，大家可以多操作

3,在Firefox，IE中调试
关于Firefox，也是强大到不行，但是他本身不自带元素查看，我们需要去下载一个dom元素查看工具。
关于IE7起，我们可以在IE的工具栏打开开放工具调用DOM工具，它也支持动态修改，便于及时修改调试。
IE6则需要去微软官网下载一个专用的开发工具。大家可以去搜索一下~不过这个的操作我觉得不是很方便。
因为这些操作都大同小异，大家务必要装好试一试，因为做风格务必要考虑其在各个主流浏览器里的兼容性。