《JavaScript高级程序设计》笔记：DOM2和DOM3（十二）

dom1级主要定义的是html和xml文档的底层结构。dom2级和dom3级在这个结构基础上引入了更多的交互能力，也支持更高级的xml特性。为此dom2级和dom3级分为了很多的模块（模块直接具有某种关联），分别描述了dom的某个非常具体的子集。这些模块如下：

• dom2级核心：在1级核心基础上构建，为节点添加了更多属性和方法；
• dom2级视图：为文档定义了基于样式信息的不同视图；
• dom2级事件：说明了如何使用事件与dom文档交互；
• dom2级样式：定义了如何以编程方式来访问和改变css样式信息；
• dom2级遍历和范围：引入了遍历dom文档和选择其特定部分的新接口；
• dom2级html：在1级html基础上构建，添加了更多的属性、方法和新接口。

dom变化

dom2级和dom3级的目的在于扩展dom api，以满足操作xml的所有需求，同时提供更好的错误处理级特性检测能力。

通过下列代码来确定浏览器是否支持这些dom模块：

var supportsdom2core = document.implementation.hasfeature("core","2.0");
var supportsdom3core = document.implementation.hasfeature("core","3.0");
var supportsdom2html = document.implementation.hasfeature("html","2.0");
var supportsdom2views = document.implementation.hasfeature("views","2.0");
var supportsdom2xml = document.implementation.hasfeature("xml","2.0");

针对xml命名空间的变化

<xhtml:html xmlns:xhtml="http://www.w3.org/1999/xhtml">
    <xhtml:head>
        <xhtml:title>example xhtml page</xhtml:title>
    </xhtml:head>
    <xhtml:body xhtml:class="home">
        hello world!
    </xhtml:body>
</xhtml:html>

 样式

访问元素的样式

对于使用短横线（例如：background-image）的css属性名，必须将其转换为驼峰大小写形式，才能通过javascript来访问。如下：

var mydiv = document.getelementbyid('mydiv');
mydiv.style.backgroundcolor = 'red';

mydiv.style.width = '200px';
mydiv.style.height = '200px';

mydiv.style.border = '1px solid #ccc';

其中一个不能直接转化的css属性为float。由于float为javascript的保留字，因此不能作为属性名。“dom2级样式”规范规定对象上相应的属性名应该是cssfloat。除了ie浏览器，其它浏览器都支持这个属性。而ie支持的是stylefloat。

dom样式属性和方法

“dom2级样式”规范为style对象定义了一些属性和方法，常用：

• csstext：通过它可以访问到style特性中的css代码。
• length：应用给元素的css属性的数量。
• getpropertyvalue(propertyname)：返回给定属性的字符串值。
• item(index)：返回给定位置的css属性的名称。
• removeproperty(propertyname)：从样式中删除给定的属性。
• setproperty(propertyname,value,priority)：将给定的属性设置为相应的值，并加上优先权标志（“important”或者一个空字符串）。

var mydiv = document.getelementbyid('page1');
mydiv.style.csstext = "display:block;width:300px;background:red;color:#fff;"
console.log(mydiv.style.csstext); //display: block; width: 300px; background: red; color: rgb(255, 255, 255);

设置csstext是为元素应用多项变化最快捷的方式，因为可以一次性的应用所有变化。

var mydiv = document.getelementbyid('page1');
var i,len,prop,value;
for(i =0, len = mydiv.style.length; i < len; i++){
    prop = mydiv.style[i]; //或者 mydiv.style.item(i)
    value = mydiv.style.getpropertyvalue(prop);
    console.log(prop + "：" + value);    
}
mydiv.style.removeproperty('font-size');

计算的样式

虽然style对象能够提供支持style特性的任何元素的样式信息，但它不包含从其它样式表层叠而来并影响当前元素的样式信息。“dom2级样式”增强了document.defaultview，提供了getcomputedstyle()方法。这个方法接收两个参数：要取得计算样式的元素和一个伪元素字符串（例如":after"）。如果不需要伪元素，那么第二个参数可以为null。getcomputedstyle()方法返回一个cssstyledeclaration对象（与style属性的类型相同），其中包含当前元素的所有计算的样式。

var mydiv = document.getelementbyid('page1');
var computedstyle = document.defaultview.getcomputedstyle(mydiv,null);
console.log(computedstyle.width);
console.log(computedstyle.backgroundcolor);

ie不支持getcomputedstyle()方法，但是在ie中，每个具有style属性的元素还有一个currentstyle属性。这个属性是cssstyledeclaration的实例，包含当前元素全部计算后的样式。

var mydiv = document.getelementbyid('page1');
var computedstyle = mydiv.currentstyle;
console.log(computedstyle.width);
console.log(computedstyle.backgroundcolor);

操作样式表

cssstylesheet类型表示的是样式表。应用于文档的所有样式表是通过document.stylesheets集合来表示的。

var sheet = null;
for(var i =0, len = document.stylesheets.length; i < len; i++){
    sheet = document.stylesheets[i];
    console.log(sheet.href);
}

上面例子是获取每一个样式表的href属性。

不同浏览器的document.stylesheets返回的样式表不同，dom规定了一个包含cssstylesheet对象的属性，名叫sheet,除了ie浏览器，其它浏览器都支持;ie支持的是stylesheet属性。在不同浏览器取得样式表对象，代码如下：

function getstylesheet(element){
    return element.sheet || element.stylesheet;
}

//取得第一个link元素引入的样式表
var link = document.getelementsbytagname('link')[0];
var sheet = getstylesheet(link);
console.log(sheet);

得到的结果如下图：

这里的getstylesheet（）返回的样式表对象和document.stylesheets集合中的样式表对象相同。

 元素大小

1.偏移量

• offsetheight：元素在垂直方向上占用的空间大小，以像素计算。包括元素的高度、（可见的）水平滚动条的高度、上边框高度和下边框高度。
• offsetwidth：元素在水平方向上占用的空间大小，以像素计算。包括元素的宽度、（可见的）垂直滚动条的宽度、左边框宽度和右边框宽度。
• offsetleft：元素的左外边框至包含元素的左内边框之间的像素距离。
• offsettop：元素的上外边框至包含元素的上内边框之间的像素距离。

其中offsetleft和offsettop属性跟包含元素有关，包含元素的引用保存在offsetparent属性中。offsetparent属性不一定与parentnode的值相等。

例如，<td>元素的offsetparent是作为其祖先元素的<table>元素，因为<table>是在dom层次中距<td>最近的一个具有大小的元素。如下图：

计算某个元素在页面上的偏移量，如下代码分别取得元素的左和上偏移量：

function getelementleft(element){
    var actualleft = element.offsetleft;
    var current = element.offsetparent;
    while(current !== null){
        actualleft += current.offsetleft;
        current = current.offsetparent;
    }
    return actualleft;
}

    
function getelementtop(element){
    var actualtop = element.offsettop;
    var current = element.offsetparent;
    while(current !== null){
        actualtop += current.offsettop;
        current = current.offsetparent;
    }
    return actualtop;
}

var mydiv = document.getelementbyid('page1');
console.log(getelementleft(mydiv));
console.log(getelementtop(mydiv));

2.客户区大小

元素的客户区大小，指的是元素内容及其内边距所占据的空间大小。有关客户区大小的属性有两个：clientwidth和clientheight。

• clientwidth：元素内容区宽度加上左右内边距宽度（因此滚动条占据的空间不计算在内）。
• clientheight：元素内容区高度加上上下内边距高度（因此滚动条占据的空间不计算在内）。

如图所示描述：

例如：要确认浏览器视口大小，可以使用document.documentelement或document.body(ie7之前的版本中)的clientwidth和clientheight。

function getviewport(){
    if(document.compatmode == 'backcompat'){  //ie7浏览器之前
        return {
            width:document.body.clientwidth,
            height:document.body.clientheight
        }
    }else{ //标准浏览器 document.compatmode 为css1compat
        return {
            width:document.documentelement.clientwidth,
            height:document.documentelement.clientheight
        }
    }
}

var result = getviewport();
console.log(result.width); 
console.log(result.height);

3.滚动大小

滚动大小，指的是包含滚动内容的元素的大小。有的元素（例如<html>元素），即使没有执行任何代码也能自动添加滚动条；但另外一些元素，需要通过设置css的overflow属性进行设置才能滚动。以下有四个跟滚动相关的属性：

• scrollheight：在没有滚动条的情况下，元素内容的总高度。
• scrollwidth：在没有滚动条的情况下，元素内容的总宽度。
• scrollleft：被隐藏在内容区域左侧的像素数。通过设置这个属性可以改变元素的滚动位置。
• scrolltop：被隐藏在内容区域上方的像素数。通过设置这个属性可以改变元素的滚动位置。

其中scrollheight和scrollwidth主要用于确定元素内容的实际大小。比如带有垂直滚动条的页面总高度为document.documentelement.scrollheight。

 对于不包含滚动条的页面而言，scrollwidth和scrollheight与clientwidth和clientheight之间的关系并不十分清晰。在这种情况下，基于document.documentelement查看这些属性会在不同浏览器之间发现一些不一致的问题，如下描述：

• firefox中这两组属性始终是相等的，但大小代表的是文档内容区域的实际尺寸，而非视口的尺寸。
• opera、safari3.1及更高版本、chrome中的这两组属性是有差别的，scrollwidth和scrollheight等于视口大小，而clientwidth和clientheight等于文档内容区域的大小。
• ie（标准模式）中的这两组属性不相等，其中scrollwidth和scrollheight等于文档内容区域的大小，而clientwidth和clientheight等于视口的大小。

在确定文档的总高度时（包括基于视口的最小高度时），必须取得scrollwidth/scrollheight和clientwidth/clientheight中的最大值，才能在跨浏览器的环境中得到精确的结果。下面代码：

var docheight = math.max(document.documentelement.scrollheight,document.documentelement.clientheight);
var docwidth = math.max(document.documentelement.scrollwidth,document.documentelement.clientwidth);

注意，运行在混杂模式下的ie，需要用document.body替换document.documentelement。

检测元素是否位于顶部，不是就将其滚到顶部：

function scrolltotop(element){
    if(element.scrolltop != 0){
        element.scrolltop = 0;
    }
}

4.确定元素的大小

每个元素有getboundingclientrect()方法，这个方法返回一个矩形对象。包含4个属性：left、top、right和bottom。这些属性给出了元素在页面中相对于视口的位置。但是浏览器的实现稍有不同，ie8及更早版本认为文档的左上角坐标为（2,2），而其它的浏览器包括ie9把（0,0）作为起点坐标。下面实现一个跨浏览器兼容的getboundingclientrect版本：

function getboundingclientrect(element){
    var scrolltop = document.documentelement.scrolltop || document.body.scrolltop;
    var scrollleft = document.documentelement.scrollleft || document.body.scrollleft;
    if(element.getboundingclientrect){
        if(typeof arguments.callee.offset != 'number'){
            var temp = document.createelement('div');
            temp.style.csstext = "position:absolute;top:0;left:0;";
            document.body.appendchild(temp);
            arguments.callee.offset = - temp.getboundingclientrect().top -  screentop;
            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 - screentop,
            bottom:actualtop + element.offsetheight - scrolltop
        };
    }
}

 范围

为了让开发人员更方便的控制页面，“dom2级遍历和范围”模块定义了“范围”（range）接口。通过范围可以选择文档中的一个区域，而不必考虑节点的界限（选择在后台完成，对用户是不可见的）。在常规的dom操作不能更有效地修改文档时，使用范围往往可以达到目的。但ie以专有的方式实现了自己的范围特性。

dom中的范围

dom2级在document类型中定义了createrange()方法。在兼容dom的浏览器中，这个方法属于document对象。使用hasfeature或者直接检测该方法。如下代码：

var supportsrange = document.implementation.hasfeature("range","2.0");
var alsosupportsrange = (typeof document.createrange == 'function');

如果浏览器支持范围，就可以使用createrange()来创建dom范围，如下所示：

var range = document.createrange();

每个范围由一个range类型的实例表示，这个实例拥有很多的属性和方法。下列属性提供了当前范围在文档中的位置信息。

• startcontainer：包含范围起点的节点（即选区中第一个节点的父节点）。
• startoffset：范围在startcontainer中的起点的偏移量。如果startcontainer是文本节点、注释节点、cdata节点，那么startoffset就是范围起点之前跳过的字符数量。否则，startoffset就是范围中第一个子节点的索引。
• endcontainer：包含范围终点的节点（即选区中最后一个节点的父节点）。
• endoffset：范围在endcontainer中终点的偏移量（与startoffset遵循相同的取值规则）。
• commonancestorcontainer：startcontainer和endcontainer共同的祖先节点在文档树中位置最深的那个。

在把范围放到文档中特定的位置时，这些属性都会被赋值。

1.用dom范围实现简单选择

要使用范围来选择文档中的一部分，最简单的方式是使用selectnode()和selectnodecontents()。这两个方法都接受一个参数，即一个dom节点，然后使用该节点的信息来填充范围，其中selectnode()方法选择整个节点，包括其子节点；而selectnodecontents()方法则只选择节点的子节点。如下例子：

<body>
    <p id="p1"><b>hello</b> world!</p>
<script type="text/javascript">
    var range1 = document.createrange();
    var range2 = document.createrange();
    var p1 = document.getelementbyid('p1');
    range1.selectnode(p1);
    range2.selectnodecontents(p1);
</script>
</body>

2.用dom范围实现复杂选择

要创建复杂的范围就得使用setstart()和setend()方法。这两个方法都接受两个参数：一个参照节点和一个偏移量值。

3.操作dom范围中的内容

• deletecontents()：从文档中删除范围所包含的内容。
• extractcontents()：从文档中移除范围选区，跟deletecontents()的方法的区别在于会返回范围的文档片段。
• clonecontents()：创建范围对象的一个副本。

4.插入dom范围中的内容

• insertnode()
• surroundcontents()

5.折叠dom范围

• collapse()

6.比较dom范围

• compareboundarypoints()

7.复制dom范围

• clonerange()

8.清理dom范围

• detach()

ranage.detach();
range = null;