了解：
DOM可以以一种独立于平台和语言的方式访问和修改一个页面文档的内容和结构，是表示和处理HTML或XML文档的常用方法。DOM实际上是以面向对象方式描述文档模型，定义了表示和修改文档所需的对象，这些对象的行为和属性以及这些对象之间的关系。DOM将整个页面映射为一个由层次节点组成的文件，使用DOM可以让页面动态的变化。
DOM主要由三个部分构成：
（1）Core DOM：定义了一套标准的针对任何结构化文档的对象。
（2）XML DOM：定义了一套标准的针对XML文档的对象。
（3）HTML DOM：定义了一套标准的针对HTML文档的对象。
由于HTML是按照XML规范重新定义的HTML，所以DOM的这三部分都适用HTML。
1、节点树
DOM把HTML文档中的每个成分都定义成了一个节点。包括
- 整个文档是一个文档节点。
- 每个HTML标签是一个元素节点。
- 包含在HTML标签中的文本（内容）是文本节点。
- HTML标签的每一个属性是一个属性节点。
- 注释属于注释节点。
HTML文档的所有节点组成了一个节点树（或者文档树），HTML文档的每个元素、属性和内容文本等代表树中的一个节点，树起始于文档节点，并由此继续延伸，直到所有的文本节点。
一棵节点数中的所有节点彼此间都有等级和层次关系。
- 除文档节点之外的每个节点都有父节点。
- 大部分元素节点都有子节点。
- 当节点共享同一个父节点时，它们就是同辈（同级节点）。
- 节点也可以拥有后代，后代指某个节点的所有子节点，或者这些子节点的子节点。
- 节点也可以拥有先辈，先辈是某个节点的父节点，或者父节点的父节点。
2、DOM节点
DOM是一组对象的集合，通过对象特定的属性和方法可以操作这些对象。在实际应用中，主要使用的DOM对象是Node对象、HTML Element对象、HTMLDocument对象和HTMLDOM对象。
（1）、Node对象
| 属性 | 描述 | |
| nodeType | 显示节点的类型 | 元素：1；属性：2；文本：3；注释：8；文档：9； |
| nodeName | 显示节点的名称 | 元素节点值：标签名称；属性节点值：属性名称；文本节点值：#text；文档节点值：#document； |
| nodeValue | 显示节点的值 | 文本节点文本内容；属性节点属性值；文档节点和元素节点不可用。 |
| attributes | 所有属性节点的集合（数组） | |
| firstChild | 表示某一个节点的第一个子节点 | |
| lastChild | 表示某一个节点的最后一个子节点 | |
| childNodes | 表示所在节点的所有子节点 | |
| parentNode | 表示所在节点的父节点 | |
| nextSibling | 紧挨着当前节点的下一个节点 | |
| previousSibling | 紧挨着当前节点的上一个节点 |
| 方法 | 描述 |
| hasChildNodes() | 判定一个节点是否有子节点，有返回true，没有返回false |
| removeChild() | 去除一个节点 |
| appendChild() | 添加一个节点，如果文档树中已经存在该节点，则将它删除，然后在新位置插入 |
| replaceChild() | 从文档树中删除（并返回）指定的子节点，用另一个节点来替换它 |
| insertBefore() | 在指定节点的前面插入一个节点，如果已经存在，则删除原来的，然后在新位置插入 |
| cloneNode() | 复制一个节点，该方法有一个参数，true表示同时复制所有的子节点，false表示仅复制当前节点 |
（2）、HTMLElement对象
HTMLElement对象表示HTML文档中的任意元素，是HTML DOM的基本对象，提供HTML元素对象的通用属性和方法。HTMLElement对象继承了Node和Element对象的标准属性。
| 属性 | 描述 |
| className | 规定元素的class属性 |
| id | 规定元素的id属性 |
| style | 返回为当前元素设置内联样式的style属性对象 |
| currentStyle | 一个currentStyle对象 ，表示页面中所有样式声明按CSS层叠规则作用于元素的最终样式 |
| title | 规定元素的title属性 |
| innerHTML | 规定元素标签对之间的所有HTML代码 |
| outerHTML | 规定元素完整的HTML代码，包括innerHTML和元素自身标签 |
| offsetHeight、offsetWidth | 返回元素的高度和宽度，单位：像素，类型：int |
| offsetLeft | 返回当前元素的左边界到它的包含元素的左边界的偏移量 ，单位：像素，类型：int |
| offsetTop | 返回当前元素的上边界到它的包含元素的上边界的偏移量，单位：像素，类型：int |
| scrollHeight、scrollWidth | 当一个元素拥有滚动条时，返回元素的完整的高度和宽度，单位：像素，类型：int |
| scrollTop、scrollLeft | 返回已经滚动到元素的左边界或上边界的像素数。只有在元素有滚动条的时候才有用。单位：像素，类型：int |
| offsetParent | 返回对最近的动态定位的包含元素的引用，所有的偏移量都根据该元素来决定，如果该元素的样式属性display设置为none，则该属性返回null |
（3）、HTMLDocument对象
HTMLDocument对象表示HTML文档树的根。在BOM和HTML DOM中被称为Document对象。
| 集合 | 描述 |
| all[] | 文档中所有HTML元素 |
| styleSheets[] | 文档中所有样式表对象的集合，包含内部和外部样式 |
| 属性 | 描述 |
| body | 返回对<body>元素对象的引用 |
| documentElement | 返回对<html>元素对象的引用 |
| 方法 | 描述 |
| getElementById() | 返回拥有指定id的第一个对象 |
| getElementsByName() | 返回带有指定名称的对象集合 |
| getElementsByTagName() | 返回带有指定标签名的对象集合 |
3、DOM与CSS
（1）Style对象
Style对象代表一个单独的样式声明，可从应用样式的文档元素访问Style对象。使用Style对象属性的语法如下：
document.getElementById("id").style.property=valueStyle对象获取的是内联样式，即元素标签中style属性的值，与CSS相对应。
| 属性 | 描述 |
| background | 在一行中设置所有的背景属性 |
| backgroundAttachment | 设置背景图像是否固定或随页面滚动 |
| backgroundColor | 设置元素的背景颜色 |
| backgroundImage | 设置元素的背景图像 |
| backgroundPosition | 设置背景图像的起始位置 |
| backgroundRepeat | 设置是否及如何重复背景图像 |
| 属性 | 描述 |
| border | 在一行设置四个边框的所有属性 |
| borderBottom | 在一行设置底边框的所有属性 |
| borderBottomColor | 设置底边框的颜色 |
| borderBottomStyle | 设置底边框的样式 |
| borderBottomWidth | 设置底边框的宽度 |
| borderColor | 设置所有四个边框的颜色（可设置四种颜色） |
| borderLeft | 在一行设置左边框的所有属性 |
| borderRight | 在一行设置右边框的所有属性 |
| borderTop | 在一行设置顶边框的所有属性 |
| borderWidth | 设置所有四个边框的宽度（可设置四种宽度） |
| borderStyle | 设置所有四个边框的样式（可设置四种样式） |
| margin | 设置元素的边距（可设置四个值） |
| marginBottom | 设置元素的底边距 |
| marginLeft | 设置元素的左边距 |
| marginTop | 设置元素的上边距 |
| marginRight | 设置元素的右边距 |
| padding | 设置元素的内边距或填充（可设置四个值） |
| paddingBottom | 设置元素的底内边距或底填充 |
| paddingLeft | 设置元素的左内边距或左填充 |
| paddingTop | 设置元素的上内边距或上填充 |
| paddingRight | 设置元素的右内边距或右填充 |
| 属性 | 描述 |
| clear | 设置在元素的哪边不允许其他的浮动元素 |
| clip | 设置元素的形状 |
| content | 设置元信息 |
| cssFloat | 设置图像或文本将出现（浮动）在另一个元素中的何处 |
| cursor | 设置显示的指针类型 |
| direction | 设置元素的文本方向 |
| display | 设置元素如何被显示 |
| height | 设置元素的高度 |
| maxHeight | 设置元素的最大高度 |
| maxWidth | 设置元素的最大宽度 |
| minHeight | 设置元素的最小高度 |
| minWidth | 设置元素的最小宽度 |
| overflow | 规定如何处理不适合元素盒的内容 |
| verticalAlign | 设置对元素中的内容进行垂直排列 |
| visiblity | 设置元素是否可见 |
| width | 设置元素的宽度 |
| 属性 | 描述 |
| listStyle | 在一行设置列表的所有属性 |
| listStyleImage | 把图像设置为列表项标记 |
| listStylePosition | 设置列表项标记的位置 |
| listStyleType | 设置列表项标记的类型 |
| 属性 | 描述 |
| bottom | 设置元素的底边缘距离父元素底边缘的之上或之下的距离 |
| left | 设置元素的左边缘距离父元素左边缘的左边或右边的距离 |
| position | 把元素放置在static/relative/absolute/fixed的位置 |
| right | 设置元素的右边缘距离父元素右边缘的左边或右边的距离 |
| top | 设置元素的顶边缘距离父元素顶边缘的之上或之下的距离 |
| zIndex | 设置元素的堆叠次序 |
| 属性 | 描述 |
| borderCollapse | 设置表格边框是否合并为单边框或者像在标准的HTML中那样分离 |
| borderSpacing | 设置分隔单元格边框的距离 |
| captionSide | 设置表格标题的位置 |
| emptyCells | 设置是否显示表格中的空单元格 |
| tableLayout | 设置用来显示表格单元格、行以及列的算法 |
| 属性 | 描述 |
| color | 设置文本的颜色 |
| font | 在一行设置所有的字体属性 |
| fontFamily | 设置元素的字体系列 |
| fontSize | 设置元素的字体大小 |
| fontSizeAdjust | 设置/调整文本的尺寸 |
| fontStretch | 设置如何紧缩或伸展字体 |
| fontStyle | 设置元素的字体样式 |
| fontVariant | 用小型大写字母字体来显示文本 |
| fontWeight | 设置字体的粗细 |
| letterSpacing | 设置字符间距 |
| lineHeight | 设置行间距 |
| quotes | 设置在文本中使用哪种引号 |
| textAlign | 排列文本 |
| textDecoration | 设置文本的修饰 |
| textIndent | 缩进首行文本 |
| textShadow | 设置文本的阴影效果 |
| textTransform | 对文本设置大写效果 |
| whiteSpace | 设置如何设置文本中的折行和空白符 |
| wordSpacing | 设置文本中的词间距 |
（2）、CurrentStyle对象
CurrentStyle对象返回所有样式声明（包括内部、外部和内联）按CSS层叠规则作用于元素的最终样式，而Style对象只能返回通过标签style属性应用到元素的内联样式。只有IE和Opera支持使用CurrentStyle获取元素计算后的样式，其他浏览器不支持。标准浏览器中使用getComputedStyle()方法。
var mystyle=window.getComputedStyle("元素","伪类");
//第一个参数为要获取计算后的样式的目标元素
//第二个参数“伪类”是必须的（如果不需要伪类，则设置为null）
//只可读getComputedStyle()与style的主要区别有：
（1）、getComputedStyle()是只读的，只能获取样式，不能设置；style能读能写；
（2）、getComputedStyle()获取的是最终应用在元素上的所有CSS属性对象（即使没有CSS代码）；style只能获取style属性中的CSS样式。对于一个没有设定任何样式的元素，getComputedStyle()返回对象中的length属性值，而style对象中的length是0。
//兼容处理：
//兼容处理
//var op=document.getElementById("op");
//alert(getStyle(op).fontSize)
//处理方法
function getStyle(op){
var ocurrentStyle=null;
if(op.currentStyle){
//兼容IE浏览器
ocurrentStyle=op.currentStyle;
}
else{
//兼容FF等标准浏览器
ocurrentStyle=window.getComputedStyle(op,null);
}
return ocurrentStyle;
}
(3)、StyleSheet对象
HTMLDocument对象的集合StyleSheets是StyleSheet对象的集合，每个StyleSheet对象表示文档中的独立样式表，即内部样式或外部样式。
| 属性或方法 | 描述 |
| rules | 引用rule对象集合，包含样式表定义的所有样式规则。每个StyleSheet对象表示文档中的独立样式表，即内部样式或外部样式。 |
| cssRules | 同rules |
| style | 引用一个样式对象，cssText属性表示样式声明 |
| addRule(selector,style) | 添加样式规则。Selector是选择器 ，style是样式声明 |
| insertRule(rule,index) | 插入样式规则。rule是样式规则，index是索引号 |
| removeRule(index) | 删除指定索引号的样式规则 |
由于不同浏览器对StyleSheet对象支持有差异，因此在使用的StyleSheet对象时要做兼容处理。
案例：
<head>
<style type="text/css">
.btu{font-weight:900;}
</style>
<link id="sheet" rel="stylesheet" type="text/css" href="js(StyleSheet)1.css"/>
<script type="text/javascript">
//此部分处理
</script>
</head>
<body>
<p class="btu">清华大学</p>
<button id="small">小字体</button>
<button id="big">大字体</button>
</body>JS部分：
window.onload=function(){
//引用文档第一个样式表
var oStyleSheet=document.styleSheets[0];
//考虑兼容性
if(oStyleSheet.rules){
//兼容IE
oStyleSheet.addRule("a","text-align:center;");//添加样式规则
/*其他操作*/
var str="本页面第一个样式表定义了以下"+oStyleSheet.rules.length+"条样式规则:\n";
for(var iCv=0;iCv<oStyleSheet.rules.length;iCv++){
//依次访问每个样式规则
var oRule=oStyleSheet.rules[iCv];//注意
str+=oRule.selectorText+"{"+oRule.style.cssText+"}\n";
}
}
else{
//兼容FF
var sRule="a{text-align:center;}";
var iIndex=oStyleSheet.cssRules.length;
oStyleSheet.insertRule(sRule,iIndex);//添加样式规则
/*其他操作*/
var str="本页面第一个样式表定义了以下"+oStyleSheet.rules.length+"条样式规则:\n";
for(var iCv=0;iCv<oStyleSheet.rules.length;iCv++){
//依次访问每个样式规则
var oRule=oStyleSheet.cssRules[iCv];//注意
str+=oRule.selectorText+"{"+oRule.style.cssText+"}\n";
}
}
alert(sStr);
document.getElementById("small").onclick=function(){
document.getElementById("sheet").href="js(StyleSheet)2.css";
}
扫一扫
422
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
