第十二章 DOM2和DOM3

DOM变化

isSameNode()和 isEqualNode()。这两个方法都接受 一个节点参数，并在传入节点与引用的节点相同或相等时返回 true。所谓相同，指的是两个节点引用的 是同一个对象。所谓相等，指的是两个节点是相同的类型，具有相等的属性（nodeName、nodeValue， 等等），而且它们的 attributes 和 childNodes 属性也相等（相同位置包含相同的值）。

var div1 = document.createElement("div"); 
div1.setAttribute("class", "box"); 
 
var div2 = document.createElement("div"); 
div2.setAttribute("class", "box"); 
 
alert(div1.isSameNode(div1));  //true 
alert(div1.isEqualNode(div2)); //true 
alert(div1.isSameNode(div2));  //false 

setUserData()方法会将数据指 定给节点，它接受 3个参数：要设置的键、实际的数据（可以是任何数据类型）和处理函数。

使用 getUserData()并传入相同的键，就可以取得该数据

document.body.setUserData("name", "Nicholas", function(){}); 
var value = document.body.getUserData("name");  

传入 setUserData()中的处理函数会在带有数据的节点被复制、删除、重命名或引入一个文档时 调用，因而你可以事先决定在上述操作发生时如何处理用户数据。处理函数接受 5个参数：表示操作类 型的数值（1 表示复制，2 表示导入，3 表示删除，4 表示重命名）、数据键、数据值、源节点和目标节 点。在删除节点时，源节点是 null；除在复制节点时，目标节点均为 null。在函数内部，你可以决定 如何存储数据。

样式

在 HTML中定义样式的方式有 3种：通过元素包含外部样式表文件、使用

访问元素的样式 （行内样式）

任何支持 style 特性的 HTML元素在 JavaScript中都有一个对应的 style 属性。这个 style 对象 是 CSSStyleDeclaration 的实例，包含着通过 HTML的 style 特性指定的所有样式信息，但不包含 与外部样式表或嵌入样式表经层叠而来的样式。

对于使用短划线（分隔不同的词汇，例如 background-image）的 CSS属性 名，必须将其转换成驼峰大小写形式，才能通过 JavaScript来访问。

• background-image => style.backgroundImage
• font-family => style.fontFamily

由于 float 是 JavaScript中的保留字，因此不能用作属性名。对象上相应的属性名应该是 cssFloat

<div id="myDiv" style="background-color:blue; width:10px; height:25px"></div> 

alert(myDiv.style.backgroundColor);      //"blue" 
alert(myDiv.style.width);                //"10px" 
alert(myDiv.style.height);               //"25px" 

style对象定义了一些属性和方法

• cssText：如前所述，通过它能够访问到 style 特性中的 CSS代码。
• length：应用给元素的 CSS属性的数量。
• parentRule：表示 CSS信息的 CSSRule 对象。本节后面将讨论 CSSRule 类型
• getPropertyCSSValue(propertyName)：返回包含给定属性值的 CSSValue 对象
• getPropertyPriority(propertyName)：如果给定的属性使用了!important 设置，则返回 “important”；否则，返回空字符串。
• getPropertyValue(propertyName)：返回给定属性的字符串值。
• item(index)：返回给定位置的 CSS属性的名称。
• removeProperty(propertyName)：从样式中删除给定属性。
• setProperty(propertyName,value,priority)：将给定属性设置为相应的值，并加上优先 权标志（"important"或者一个空字符串）。

style 对象实际上就相当于一个集合，都可以使用方括号语法来代替 item()来取得给定位置的 CSS属性

// 遍历style属性中的属性名
for (var i=0, len=myDiv.style.length; i < len; i++){
     alert(myDiv.style[i]); //或者 myDiv.style.item(i) 
}

计算样式

getComputedStyle()方法接受两个参数：要取得计算样式的元素和一个伪元素字符串（例 如":after"）。如果不需要伪元素信息，第二个参数可以是 null。getComputedStyle()方法返回一 个 CSSStyleDeclaration 对象（与 style 属性的类型相同），其中包含当前元素的所有计算的样式。

利用这个方法可以获得这个元素所有的css样式叠加的内容，包括外联样式，内联样式和行内样式的所有关于该元素的样式最终的结果（优先级排序后）。那些被覆盖的样式将没法得到。

var myDiv = document.getElementById("myDiv"); 
var computedStyle = document.defaultView.getComputedStyle(myDiv, null); 
alert(computedStyle.backgroundColor);  // "red" 
alert(computedStyle.width);    // "100px" 
alert(computedStyle.height);    // "200px" 
alert(computedStyle.border);    // "1px solid black" 

所有计算的样式都是只读的；不能修改计算后样式对 象中的 CSS属性。

操作样式表

对cssSheet的增删改查，具体api查询书中的位置，这种操作实际中我很少使用，所以暂时没有进行总结

元素大小

偏移量

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

offsetParent 是离当前元素最近的具有大小的父级元素

客户区大小

• clientWidth 属性是元素内容区宽度加 上左右内边距宽度；
• clientHeight 属性是元素内容区高度加上上下内边距高度。

客户区大小就是元素内部的空间大小，因此滚动条占用的空间不计算在内。

要确定浏览器 视口大小，可以使用 document.documentElement 或 document.body（在 IE7 之前的版本中）的 clientWidth 和 clientHeight。

滚动大小

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

确定元素大小

getBoundingClientRect()方法返回会一个矩形对象，包含 4个属性：left、top、right 和 bottom。这些属性给出了元素在页面中相对于视口的位置。

遍历

DOM的遍历api比较垃圾，一般都是使用js对dom树进行遍历，所以这块内容可以不用学习，知道有dom方法可以遍历，且使用的是深度优先的方法进行遍历即可。

范围

可以使用 createRange()来创建 DOM范围

与节点类似，新创建的范围也直接与创建它的文档关联在一起，不能用于其他文档。创建了范围之 后，接下来就可以使用它在后台选择文档中的特定部分。而创建范围并设置了其位置之后，还可以针对 范围的内容执行很多种操作，从而实现对底层 DOM树的更精细的控制。

每个范围由一个 Range 类型的实例表示，这个实例拥有很多属性和方法。

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

用 DOM范围实现简单选择

要使用范围来选择文档中的一部分，简的方式就是使用 selectNode()或 selectNodeContents()。 这两个方法都接受一个参数，即一个 DOM 节点，然后使用该节点中的信息来填充范围。

selectNode()方法选择整个节点，包括其子节点；而 selectNodeContents()方法则只选择节点的 子节点。

<p id="p1"><b>Hello</b> world!</p>

var range1 = document.createRange();
var range2 = document.createRange();
var p1 = document.getElementById("p1");
range1.selectNode(p1);
range2.selectNodeContents(p1);

操作 DOM范围中的内容

在创建范围时 ，内部会为这个范围创建一个文档片段，范围所属的全部节点都被添加到了这个文档 片段中。为了创建这个文档片段，范围内容的格式必须正确有效。在前面的例子中，我们创建的选区分 别开始和结束于两个文本节点的内部，因此不能算是格式良好的 DOM结构，也就无法通过 DOM来表 示。但是，范围知道自身缺少哪些开标签和闭标签，它能够重新构建有效的 DOM结构以便我们对其进 行操作。

• deleteContents()方法能够从文档中删除范 围所包含的内容。
• extractContents()也会从文档中移除范围选区，但会返回范围的文档片段。利用这个返回的值，可以将范围的内容 插入到文档中的其他地方。
• cloneContents()创建范围对象的一个副本，可以在文档的其他地方插入该 副本。

插入 DOM范围中的内容

• 使用 insertNode() 方法可以向范围选区的开始处插入一个节点
• surroundContents() 方法可以环绕范围插入内容。这个方法接受一个参数，即环绕范围内容的节点。