Javascript学习笔记7 DOM2和DOM3

样式

style对象

任何支持style特性的HTML元素在Javascript中都有个style属性。其包含着通过HTML的style特性指定的所有样式信息（不包括外部样式表）

div.style.color = "red";
div.style.backgroundcolor = "white";
div.style.width = "100px";

除此之外，style对象还具有一些属性和方法

div.style.cssText = "width: 25px; height: 20px";  //style特性中的css代码，可以重写
div.style.length   //css属性的个数
div.style.getPropertyValue("color");  //取得某特性的值，返回字符串
div.style.removeProperty("border");  //移除某属性

计算样式

document.defaultView.getComputedStyle()

接受两个参数，取得计算样式的元素和一个伪元素字符串（或null）,返回一个类似style的对象，其中包含了当前元素的所有计算样式，但只读不可修改。（IE为currentStyle属性）

var myDiv = document.getElementById("myDiv");
var computedStyle = document.defaultView.getComputedStyle(myDiv,null);

alert(computedStyle.width);  //100px
alert(computedStyle.color);  //"red"

样式表

包括通过

<link>

元素包含的样式表和在

<style>

元素中定义的样式表

通过document.styleSheets集合来表示样式表，可通过方括号或item(）方法访问每个样式表

var sheet = document.styleSheets[0];

样式表的属性和方法

disabled 表示该样式表是否可用（true为不可用），只有该属性可读写，其余属性都是只读

href  如果该样式表是以<link>元素包含的，则是样式表URL，否则为null

cssRules  样式表中包含的样式规则集合，IE为rules属性

deleteRule(index) 删除样式表中指定位置的规则，IE为removeRule()

insertRule(rule,index) 向样式表中指定位置插入样式规则，IE为addRule()

CSS规则

CSSRule对象表示样式表中的每一条规则，通过样式表的cssRules属性，利用方括号可以取得该对象

var sheet = document.styleSheets[0];
var rules = sheet.cssRules || sheet.rules;
var rule = rules[0];   //取得第一条规则

CSSRule对象的属性和方法

cssText  返回整条规则对应的文本，与style对象的cssText相比，多了选择符文本和花括号，且只读

selectorText  返回当前规则的选择符文本，例如 "div.box" （box类的div元素）

style   与元素的style对象类似，可以通过它来读取规则中的样式值，例如 style.width

元素大小

偏移量

element.offsetHeight     元素在垂直方向上占用的空间大小，包括元素的高度、滚动条以及边框
element.offsetWidth      元素在水平方向上占用的空间大小，包括元素的高度、滚动条以及边框
element.offsetLeft       元素左外边框至包含元素的左内边框之间的距离
element.offsetTop        元素上外边缘至包含元素的上内边框之间的距离

客户区大小

element.clientWidth    元素内容宽度+左右内边距
element.clientHeight   元素内容高度+上下内边距

滚动大小

element.ScrollHeight    在没有滚动条下元素内容的总高度
element.ScrollWidth     在没有滚动条下元素内容的总宽度
element.ScrollLeft      被隐藏在内容区域左侧的像素数，当水平方向上滚动条未滚动时，这个值为0，可以设置改变水平滚动位置
element.ScrollTop       被隐藏在内容区域上侧的像素数，当垂直方向上滚动条未滚动时，这个值为0，可以设置改变垂直滚动位置

确定元素大小

getBoundingClientRect()

方法返回一个矩形对象，其包含

left

，

top

，

right

，

bottom

四个属性，通过加减就可以确定元素大小

var rect = element.getBoundingClientRect()；

遍历

NodeIterator

创建

var itertor = document.createNodeItertor(root,whatToShow,filter,entityReferenceExpansion);

root: 作为搜索起点的树中节点

whatToShow：表示要访问哪种类型节点的数字代码，存储在NodeFilter的属性中。例如

NodeFilter.SHOW_ALL

(所有类型的节点)，

NodeFilter.SHOW_ELEMENT

(元素节点)，

NodeFilter.SHOW_TEXT

(文本节点)

filter：是一个NodeFilter对象，或者一个表示应该接受还是拒绝某种特定节点的函数

entityReferenceExpansion:布尔值，表示是否扩展实体引用。这个参数在HTML页面中没有用，因为其中的实体引用不能扩展

遍历方法

itertor.nextNode();   //返回下一个节点，遍历到最后节点后，将返回null
itertor.previousNode();  //返回上一个节点，根结点之后，将返回null

TreeWalker

创建

var itertor = document.createTreeWalker(root,whatToShow,filter,entityReferenceExpansion);

参数与NodeItertor相同

遍历方法

除了拥有

nextNode()

和

previousNode()

方法外，还具有以下方法

itertor.parentNode();   //遍历到当前节点的父节点
itertor.firstChild();   //遍历到当前节点的第一个子节点
itertor.lastChild();   //遍历到当前节点的最后一个子节点
itertor.nextSibling();   //遍历到当前节点的下一个同胞节点
itertor.previousSibling();   //遍历到当前节点的上一个同胞节点

范围

创建范围

var range = document.createRange()

简单选择范围

range.selectNode(p);   //接受一个DOM节点参数，然后用该结点及其子节点来填充范围
range.selectNodeContents(p);    //接受一个DOM节点参数，使用其子节点来填充范围

操作范围

range.deleteContents();   //从文档中删除范围
var deleteRange = range.extractContents();   //从文档中移除并返回该范围
var cloneRange = range.cloneContents();   //创建范围副本
range.insertNode(p);   //在选区范围的开始处插入节点
var newRange = range.cloneRange()  //复制范围
range.detach   //解除对范围的引用