第十二章、DOM2和DOM3

DOM变化

node类型变化，DOM3引入两个辅助比较节点的方法，isSameNode()和isEqualNode()，分别判断调用节点和参数节点是否相同或相等。相同表示两个节点引用的是同一个节点，相等表示两个节点是相同的类型，具有相同的属性(nodeName，nodeValue)，而且他们的attributes和childNodes属性也相等。

<ul class="a">
	<li class="b">abc</li>
	<li class="b">abc</li>
</ul>

var li = document.querySelectorAll(".b");
console.log(li[0].isSameNode(li[1]));  // false
console.log(li[0].isEqualNode(li[1]));  // true

1
2
3
4
5
6
7
8

框架的变化，框架和内嵌框架DOM2级新增属性contentDocument，这个属性包含一个指针，指向表示框架内容的文档对象。IE8之前不支持本属性，但支持一个contentWindow属性，该属性返回框架的window对象，window对象又包含document属性。兼容性获取框架的文档对象：

var iframe = document.getElementBy("iframe");
var iframeDoc = iframe.contentDocument || iframe.contentWindow.document;

1
2

样式

访问元素的样式

任何支持style特性的HTML元素都有一个对应的style属性，包含通过HTML的style特性指定的所有样式信息，但不包含外部样式表或嵌入样式表经层叠而来的样式。有短划线的CSS属性名（例如background-color）必须转为驼峰大小写形式。float是JavaScript中的关键字，要转为cssFloat，IE使用的是styleFloat。style对象具有以下属性方法：
cssText属性，能够访问到style特性中的CSS代码。
getPropertyValue()，传入一个参数，返回包含给定属性名的字符串值。
getPropertyPriority()，传入一个参数，返回包含给定属性是否使用了!important设置。设置了则返回"important"字符串，否则返回空字符串。
removeProperty()，传入一个参数，从样式中删除给定的属性。
setProperty()，传入3个参数，要设置的属性名，要设置的属性值，表示是否使用!important设置的“important”字符串或空字符串。
document.defaultView.getComputedStyle()方法用于确定元素所有的计算样式，接收两个参数，第一个为需要取得计算样式的元素，第二个为伪元素字符串，不需要伪元素则为null。IE不支持本方法，但提供元素的currentStyle属性，包含当前元素的所有计算样式。所有计算样式都是只读的，不能修改计算后的样式对象中的CSS。

元素大小

元素的可见大小由其高度，宽度决定，包括内边距，滚动条和边框大小，不包括外边距。
offsetParent属性，表示元素的包含元素，不一定与parentNode相等。
offsetHeight属性，元素在垂直方向上占用空间大小，包括元素高度，水平滚动条的高度，上边框高度和下边看高度。
offsetWidth属性，元素在水平方向上占用空间大小，包括元素宽度，垂直滚动条的宽度，左边框宽度和右边看宽度。
offsetLeft属性，元素左外边框到包含元素的左内边框之间的距离。
offsetTop属性，元素上外边框到包含元素的上内边框之间的距离。
判断元素在页面上的偏移量：

function getElementLeftTop(ele) {
	var eleLeft = ele.offsetLeft;
	var eleTop = ele.offsetTop;
	var cur = ele.offsetParent;
	while (cur !== null){
	    eleLeft += cur.offsetLeft;
        eleTop += cur.offsetTop;
	    cur = cur.offsetParent;
	}
	return {left:eleLeft, top:eleTop};
}

1
2
3
4
5
6
7
8
9
10
11

客户区域大小，指的是元素内容及其内边距所占据的空间大小。
clientWidth属性，元素内容区宽度加上左右内边距宽度。
clientHeight属性，元素内容区高度加上上下内边距宽度。
确定浏览器的视口大小：

function getElementWidthHeight() {
	if(document.compatMode == "BackCompat"){
	    return {
	        width:document.body.clientWidth,
		    top:document.body.clientHeight
	    };
	}else{
        return {
            width:document.documentElement.clientWidth,
	        top:document.documentElement.clientHeight
        };
	}
}

1
2
3
4
5
6
7
8
9
10
11
12
13

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

function getDocWidthHeight() {
    var docWidth,docHeight;
	if(document.compatMode == "BackCompat"){
        docWidth = Math.max(document.body.scrollWidth,document.body.clientWidth);
        docHeight = Math.max(document.body.scrollHeight,document.body.clientHeight);
	}else{
        docWidth = Math.max(document.documentElement.scrollWidth,document.documentElement.clientWidth);
        docHeight = Math.max(document.documentElement.scrollHeight,document.documentElement.clientHeight);
	}
    return {
        width:docWidth,
        height:docHeight
    };
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14

确定元素大小，每个元素都有一个getBoundingClientRect()方法，该方法返回一个矩形对象，包含left、top、right、bottom属性。这些元素给出了元素相对于视口的位置。

# 第十二章、DOM2和DOM3

# DOM变化

# 样式

# 访问元素的样式

# 元素大小

第十二章、DOM2和DOM3

DOM变化

样式

访问元素的样式

元素大小