红宝书第12章整理——DOM2和DOM3，非事件

来源：互联网发布：网络用语有哪些编辑：程序博客网时间：2024/05/26 09:55

DOM1：主要定义的是HTML和XML文档的底层结构

DOM2、DOM3：在DOM1的基础上，引入了更多的交互能力，也支持了更高级的xml特性。目的在于扩展DOM API，以满足操作XML的所有需求，同时提供更好的错误处理及特性检测能力。

为此，DOM2、DOM3分为许多个模块，分别描述了DOM某个非常具体的子集

有：

DOM2级核心 ——在1级基础上，添加了更多的方法和属性

DOM2级视图 ——为文档定义了基于样式信息的不同视图

DOM2级事件 ——说明了如何使用事件，与DOM文档进行交互

DOM2级样式 ——定义了如何以编程方式来改变和访问css样式信息

DOM2级遍历和范围 ——引入了遍历DOM文档的一些接口函数

DOM2级HTML ——在1级HTML上添加更多的方法和属性

————————————————————————————————————

个人感觉DOM2事件，DOM2样式更普遍，更重要一些。

下一章的事件会具体讲解DOM2事件，这章重点说一下DOM2样式

样式：

在HTML中定义样式，方法3种：

通过<link/>包含外部文件

使用<style/>来嵌入式样式

使用style特性定义不同元素的样式

1、访问对象的样式

每一个支持设置style的元素都自带一个style对象，只包含在js中直接为他设置的style样式，不包含外部link过来，和嵌入样式表经过层叠的样式（就是经过浏览器自己计算处理后的样式）

可以利用cssText属性，访问style特性中css代码。读模式返回已有代码，写模式直接覆盖原有的css样式

mydiv.style.cssText = "width:25px; height:25px";

getPropertyValue(): 接受属性名参数，返回这个属性名的值

计算的样式：

例如：

<html><head>   <style type="text/css">       #mydiv{          background-color: blue;          width:100px;          height:200px;              }</head><body>   <div id="mydiv" style = "background-color="red; border:1px solid black"></div></body></html>

这个例子中，先是在<style>中嵌入式写入几个样式，又用style写了几个特性，二者内容有相同有不同，那么对于这个div，它的样式都是经过层叠（计算）得来的，不同浏览器可能结果也不一样。

注意！！！！ 无论哪个浏览器，计算后的样式都是只读的，不能修改计算后样式对象中的css属性。浏览器中一些默认的属性值也算是计算后的样式，例如visibility，默认值为visible。那么想要对其做修改时，不能直接调用，要先人为设置一下。

2、元素大小

①偏移量

偏移量offset

是一个元素距离其offsetParent的偏移量

offsetHeight: 元素自身的高度，包括：上下边框，内边距（上+下），内容的高度

offsetWidth: 元素自身的宽度，包括：左右边框，内边距（左+右），内容的宽度

offsetLeft：元素的左外边框，到，包含它的元素（offsetParent）左内边框的距离

offsetTop：元素的上外边框，到，包含它的元素（offsetParent）上内边框的距离

如果想知道这个元素在整个页面中的偏移量，可以将offsetParent写一个循环，直至根元素，将所有的偏移量进行累加。

②客户区大小

客户区大小：client

clientHeight：内边距（上+下），内容的高度 //不含边框

clientWidth：内边距（左+右），内容的宽度 //不含边框

③滚动大小

包含滚动内容的大小

scrollHeight：打开滚动条的总高度，即实际大小

scrollWidth：打开滚动条的总宽度

0 0