Javascript学习笔记7 DOM2和DOM3

àì夳堔傛蜴生んèń 2022-05-29 13:05 202阅读 0赞

# 样式 #

## 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 iterator = document.createNodeIterator(root,whatToShow,filter,entityReferenceExpansion);

*  **root:** 作为搜索起点的树中节点
 *  **whatToShow：**表示要访问哪种类型节点的数字代码，存储在NodeFilter的属性中。例如`NodeFilter.SHOW_ALL`(所有类型的节点)，`NodeFilter.SHOW_ELEMENT`(元素节点)，`NodeFilter.SHOW_TEXT`(文本节点)
 *  **filter：**是一个NodeFilter对象，或者一个表示应该接受还是拒绝某种特定节点的函数
 *  **entityReferenceExpansion:**布尔值，表示是否扩展实体引用。这个参数在HTML页面中没有用，因为其中的实体引用不能扩展

**遍历方法**

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

## TreeWalker ##

**创建**

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

*  参数与NodeItertor相同

**遍历方法**  
除了拥有`nextNode()`和`previousNode()`方法外，还具有以下方法

iterator.parentNode();   //遍历到当前节点的父节点
    iterator.firstChild();   //遍历到当前节点的第一个子节点
    iterator.lastChild();   //遍历到当前节点的最后一个子节点
    iterator.nextSibling();   //遍历到当前节点的下一个同胞节点
    iterator.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   //解除对范围的引用