笔记《javascript高级程序设计》 第12章 DOM2和DOM3
DOM2 级核心：在 1 级基础上构建，为节点添加更多方法和属性
DOM2 级视图：为文档定义了基于样式信息的不同视图
DOM2 级事件：说明了如何使用事件和DOM文档交互
DOM2 级样式：如何以编程方式来访问和改变CSS样式信息
DOM2 级遍历和范围：引入了遍历DOM文档和选择其特定部分的新接口
DOM2 级HTML：添加了更多属性、方法和新接口
12.1 DOM变化
DOM2 级和3级的目的在于扩展DOM API，满足操作XML的所有需求，同时提供更好的错误处理及特性检测能力。
12.1.2 其它方面的变化
1.DocumentType 类型变化
新增3个属性：publicID、systemID 表示的是文档类型声明中的两个信息段，在DOM1中无法访问
internalSubset ， 用于访问包含在文档类型声明中的额外定义
2.Document 类型的变化
importNode（）
用途：从一个文档中取得一个节点，然后将其导入另一个文档。 如果调用appendChild（）在不同文档中传入节点会出错
接受两个参数：要复制的节点和一个表示是否复制子节点的布尔值。返回的结果是原来节点的副本，但能够在文档中使用
3.Node类型的变化
isSupported（）
isSameNode（）
isEqualNode（）
4.框架的变化
12.2 样式
12.2.1 访问元素的样式
style 可以获取和设置html元素style特性指定的所有样式信息，但不包含与外部样式表或嵌入样式表经层叠而来的样式。
对于使用短划线的css属性名，必须将其转换为驼峰大小写形式
1.DOM样式属性和方法
在提供元素 的style特性值时，也可修改样式
cssText：访问style特性中的css代码（写入模式，以前通过style设定的样式信息全将丢失）
length：应用给元素的css属性的数量
parentRule：表示CSS信息的CSSRule对象
getPropertyCSSValue（propertyName）：返回包含给定属性值的CSSValue对象
getPropertyPriority（propertyName）：如果给定的属性使用了!important设置，则返回 “important”，否则，返回空
gePropertyValue（propertyName）：返回给定属性的字符串值
item（index）：返回给定位置的css属性的名称
removeProperty（propertyName）：从样式中删除给定属性
setProperty（propertyName,value,priority）：将给定属性设置为相应的值，并加上优先权标志( !important 或 一个空字符串)
2.计算的样式
- document.defaultView.getComputedStyle（mydiv，:after / null） —— 此方法在IE9 以下浏览器中无法生效
接受两个参数，1 要取得计算样式的元素 ， 2 一个伪元素字符串 ：after，：before，或者为null
- 在IE8及以下中可使用 .currentStyle 属性，来获取当前元素的样式
兼容性最好求取元素所有样式列表的方法
var computedStyle = window.getComputedStyle?document.defaultView.getComputedStyle(myDiv, null):myDiv.currentStyle;
以上方法计算出的样式都是只读，不能修改。
包含属性浏览器内部所有样式信息，任何具有默认值的css属性都会表现在计算后的样式中。部分为浏览器为 visibility，部分为 visible ，有的则为 inherit
12.2.2 操作样式表
styleSheets 遍历 styleSheets 循环可以获取当前页面通过 link 包含的样式表和 style 元素定义的所有样式表。以下属性可以对样式表进行获取或者设置操作：
disabled：表示样式是否被禁用的布尔值。可读 / 写，true表示禁用
href：如果样式表通过 link 包含，则返回样式表的URL，否则为null
1. css规则。 cssStyleRule 对象包含下列属性
offset偏移量
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{ margin: 0; padding: 0; }
.waidiv{width: 600px; height: 700px; border: 6px #C0C0C0 solid;}
.py{width: 200px; height: 150px; background: #444; padding: 4px; margin: 10px; border: 5px #FF0000 solid;}
.par1{ padding: 40px;}
.par2{ padding: 30px;}
</style>
</head>
<body>
<div class="par2">
<div class="par1">
<div class="waidiv">
<div id="py" class="py">偏移量测试</div>
</div>
</div>
</div>
<input type="button" value="元素宽" onclick="getEleWidth()"/>
<input type="button" value="元素高" onclick="getEleHeight()"/>
<input type="button" value="getOffsetLeft" onclick="getEleoffLeft()"/>
<input type="button" value="getOffsetTop" onclick="getEleoffTop()"/>
<input type="button" value="元素距浏览器顶部距离" onclick="getActualTop(document.getElementById('py'))"/>
<input type="button" value="元素距浏览器左距离" onclick="getActualLeft(document.getElementById('py'))"/>
<script>
var py = document.getElementById("py");
function getEleWidth(){
alert(py.offsetWidth);
}
function getEleHeight(){
alert(py.offsetHeight);
}
function getEleoffLeft(){
alert(py.offsetLeft);
}
function getEleoffTop(){
alert(py.offsetTop);
}
function getActualLeft(element){
var actuaLeft = element.offsetLeft;
var current = element.offsetParent;
while( current !== null){
actuaLeft += current.offsetLeft;
current = current.offsetParent;
};
alert(actuaLeft);
}
function getActualTop(element){
var actuaTop = element.offsetTop;
var current = element.offsetParent;
while(current !== null){
actuaTop += current.offsetTop;
current = current.offsetParent;
};
alert(actuaTop);
}
console.log()
</script>
</body>
</html>
混杂模式、标准模式下，scrollWidth、clientWidth、document.documentElement.scrollWidth、document.body.scrollWidth
对于混杂模式下IE 需要用 document.body代替document.documentElement
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.testscroll{ width: 2000px; height: 1500px; background: #C0C0C0;}
</style>
</head>
<body>
<div class="testscroll" id="adiv"></div>
<script>
var adiv = document.getElementById("adiv");
console.log("scrollWidth:"+document.documentElement.scrollWidth);
console.log("scrollHeight:"+document.documentElement.scrollHeight);
console.log("clientWidth:"+document.documentElement.clientWidth);
console.log("clientHeight:"+document.documentElement.clientHeight);
function getWin(){
var mode = document.compatMode ;
// 是否处于标准模式
if(mode == "CSS1Compat"){
// 疑问：是不是现在浏览器版本变高，然后都同步了？
// 我测试过程中，谷歌、火狐、IE里clientWidth取到的都是视口宽度，书上说的谷歌scrollWidth为视口宽度
alert("可视区域宽度为:"+document.documentElement.clientWidth);
alert("可视区域高度为："+document.documentElement.clientHeight);
// 由于浏览器之间存在差异，以scrollWidth和clientWidth中求大值最靠谱
var docWin = Math.max(document.documentElement.scrollWidth,document.documentElement.clientWidth);
var docHei = Math.max(document.documentElement.scrollHeight,document.documentElement.clientHeight);
alert("标准模式下文档的宽度："+docWin);
alert("标准模式下文档的宽度："+docHei);
}
// 是否处于混杂模式
else if(mode == "BackCompat"){
var docWin = Math.max(document.body.scrollWidth,document.body.clientWidth);
var docHei = Math.max(document.body.scrollHeight,document.body.clientHeight);
alert("混杂模式下文档的宽度："+docWin);
alert("混杂模式下文档的宽度："+docHei);
}
}
window.onload = function(){
getWin();
}
</script>
</body>
</html>
