《JavaScript高级程序设计》总结——第12章：DOM2和DOM3（DOM变化，样式，遍历，范围）

---

 

目录

第十二章   DOM2 和 DOM3

一、DOM变化

1、针对XML命名空间的变化

二、样式

1、访问元素样式(style特性定义的样式)

2、操作样式表

3、元素大小

3.1偏移大小语法 ：(包含边框)

3.2客户区大小语法：（包含内边距）

3.3 滚动大小

​

3.4确定元素大小

三、遍历

四、范围

---

 

第十二章   DOM2 和 DOM3

         DOM2级和3级的目的在于扩展DOM API，以满足XML的所有需求，同时提供更好的错误处理及特性检测能力。

一、DOM变化

1、针对XML命名空间的变化

二、样式

1、访问元素样式(style特性定义的样式)

        a、style对象的属性和方法

cssText	style特性中的代码
length	应用给元素的css属性的数量
parentRule	CSS信息的CSSRule对象
getPropertyCSSValue(propertyName)	返回包含给定属性值的CSSValue对象
getPropertyPriority(propertyName)	若给定的属性使用了！important设置，则返回important；否则返回空字符串
getPropertyValue(propertyName)	返回给定属性的字符串值
item(index)	返回给定位置的CSS属性名称
removeProperty(propertyName)	从样式中删除给定属性
setProperty(propertyName,value,proority)	将给定属性设置为相应的值，并加上优先权标志（"important"或者一个空字符串）

b、修改元素样式的语法(样式添加在根元素)

element.style.width = "20px"

 c、访问指定位置的style样式

element.style[0];    //访问元素的第1个样式规则
element.style.item(0);    //访问元素的第1个样式规则

d、访问指定的属性值

element.style.getPropertyValue("width");    //获取element的宽度

e、

        g、计算的样式：defaultView提供getComputedStyle() 方法

            （1）、所有浏览器中，所有的计算样式只读;

            （2）、各个浏览器的支持度以及返回值不同，建议做测试;

            （3）、IE不支持getComputedStyle(),IE 中每个具有style属性的元素都有一个currentStyle属性，该属性是CSSStyleDeclaration的实例，包含当前元素全部计算后的样式

2、操作样式表

使用语法

获取页面样式表（包括rel特性被设置为"stylesheet"的link元素引入的样式表） 

document.styleSheets;    //获取页面样式表列表
document.styleSheets[0];    //获取页面第一个样式表对象

获取样式表规则(cssRules)

document.styleSheets[0].cssRules||rules;        //获取页面第一个样式表的cssRules列表
document.styleSheets[0].cssRules[0];        //获取页面第一个样式表的第一条规则

获取页面样式表style对象（可读写）

document.styleSheets[0].cssRules[0]||rules[0].style;    //获取页面样式表的style对象
document.styleSheets[0].cssRules[0]||rules[0].style.cssText;    //获取页面第一个样式表的第一条规则的cssText

修改样式表规则

document.styleSheets[0].cssRules[0].style.backgroundColor = "yellow";    //修改页面第一个样式表的第一条规则里面的background-color属性

向现有的样式表添加新规则（不建议使用，过于繁琐，建议第十章的动态添加样式的方法）

//非IE浏览器添加样式
document.styleSheets[0].insertRule("body { background-color: silver }",0);    //非IE
//IE浏览器添加样式
document.styleSheets[0].addRule("body","background-color:silver",0);    //IE

//跨浏览器添加样式
function insertRule(sheet, selectorText, cssText, position){ 
    if (sheet.insertRule){ 
            sheet.insertRule(selectorText + "{" + cssText + "}", position); 
    } else if (sheet.addRule){ 
            sheet.addRule(selectorText, cssText, position); 
    } 
} 
insertRule(document.styleSheets[0], "body", "background-color: silver", 0);

删除规则（太危险了，不建议用）

//删除第一个样式表的第一条规则
document.styleSheets[0].deleteRule(0);    //非IE
document.styleSheets[0].removeRule(0);    //IE

//兼容性 移除第一个样式表的第一条规则写法
function deleteRule(sheet, index){ 
 if (sheet.deleteRule){ 
 sheet.deleteRule(index); 
 } else if (sheet.removeRule){ 
 sheet.removeRule(index); 
 } 
}
deleteRule(document.styleSheets[0], 0);

 

        a、CSSStyleSheet类型表示的样式表，包括<link>（由HTMLLinkElement类型表示）元素包含的样式表和在<style>（由HTMLStyleElement类型表示）元素中定义的样式表;

        b、CSSStyleSheet对象是一套只读的接口（除属性）；而那两个类型可以修改HTML特性

        c、style.width = "20"   ==>混杂模式下：浏览器会默认其是"20px";标准模式下：浏览器会忽略;

        d、判断浏览器是否支持DOM2级样式表

var supportsDOM2StyleSheet = documnet.implementation.hasFeature("StyleSheet","2.0")

 

3、元素大小

3.1偏移大小语法 ：(包含边框)

//所有的偏移属性都是只读的，每次访问都要重新计算，为避免重复访问这些属性，可将其保存在局部变量中，以提高性能
element.offsetWidth;    //元素的宽度，包含边框和滚动条
element.offsetHeight;    //元素的高度，包含边框和滚动条
element.offsetLeft;        //元素的左外边框到包含元素的左内边框间的距离
element.offsetTop;         //元素的上外边框到包含元素的上内边框间的距离

3.2客户区大小语法：（包含内边距）

element.clientWidth;    //元素内容及其内边距所占据的宽度
element.clientHeight;    //元素内容及其内边距所占据的高度

常用于确定浏览器视口的大小：

//document.body在IE7及之前版本使用
//函数首先检查 document.compatMode 属性，以确定浏览器是否运行在混杂模式
function getViewport(){ 
    if (document.compatMode == "BackCompat"){ 
        return { 
            width: document.body.clientWidth, 
            height: document.body.clientHeight 
        }; 
    } else { 
        return { 
            width: document.documentElement.clientWidth, 
            height: document.documentElement.clientHeight 
        }; 
    } 
} 
//页面未初始化的话，document.body.clientWidth会返回1887，document.documentElement.clientWidth返回1903，因为body有外边距8px;

3.3 滚动大小

element.scrollWidth;    //获取元素的包含滚动内容的宽度
element.scrollHeight;    //获取元素的包含滚动内容的高度
element.scrollLeft;    //隐藏在内容区域左侧的像素数
element.scrollTop;    //隐藏在内容区域上侧的像素数

由于浏览器的处理不同，要获得视窗的大小，取得scrollWidth/clientWidth，scrollHeigth/clientHeight中的最大值

var docHeight = Math.max(document.documentElement.scrollHeight, 
 document.documentElement.clientHeight); 
var docWidth = Math.max(document.documentElement.scrollWidth, 
 document.documentElement.clientWidth); 

3.4确定元素大小

语法

element.getBoundingClientRect();    //返回的对象包含8个属性left,right,top,bottom,width,height,x,y

跨浏览器的获取getBoundingClientRect()对象的属性

function getBoundingClientRect(element){ 
    var scrollTop = document.documentElement.scrollTop; 
    var scrollLeft = document.documentElement.scrollLeft; 

    if (element.getBoundingClientRect){ 
        if (typeof arguments.callee.offset != "number"){ 
            var temp = document.createElement("div"); 
            temp.style.cssText = "position:absolute;left:0;top:0;"; 
            document.body.appendChild(temp); 
            arguments.callee.offset = -temp.getBoundingClientRect().top - scrollTop; 
            document.body.removeChild(temp); 
            temp = null; 
        } 
        var rect = element.getBoundingClientRect(); 
        var offset = arguments.callee.offset; 
        return { 
        left: rect.left + offset, 
        right: rect.right + offset, 
        top: rect.top + offset, 
        bottom: rect.bottom + offset 
        }; 
   } else { 
        var actualLeft = getElementLeft(element); 
        var actualTop = getElementTop(element); 
        return { 
        left: actualLeft - scrollLeft, 
        right: actualLeft + element.offsetWidth - scrollLeft, 
        top: actualTop - scrollTop, 
        bottom: actualTop + element.offsetHeight - scrollTop 
        } 
    } 
} 

三、遍历

四、范围