DOM2 DOM3 读书笔记

DOM2 Core     核心 在DOM1基础上添加方法和属性
DOM2 Views    视图 基于样式信息的不同视图
DOM2 Events    事件 与文档交互
DOM2 Style     样式以编程的方式来访问和改变CSS
DOM2 Traverl and Range 遍历和范围 遍历DOM
DOM2 HTML     HTML 1级HTML上添加更多属性

DOM变化（Core, HTML, Views, XML）

命名空间：HTML不支持XML命名空间

document.importNode(oldNode,true)方法，从文档复制一个节点，返回该节点。（不常用）
接收要复制的文档的节点和一个布尔值，表示是否复制子节点。

document.defaultView属性，IE不可用。返回拥有给定文档的窗口或框架。(window )（IE用parentWindow）

---

document.implementation.createDocumentType("文档类型名",pubulicId,systemId) 创建一个文档类型节点。(创建新文档时有用)

document.implementation.createDocument("命名空间URI","html","doctype") 创建一个新文档。

document.implementation.createHTMLDocument("文档标题")创建一个完整的HTML文档。

---

document.body.isSupported("HTML","2.0")方法，检测浏览器是否实现相应特性并且能够基于给定节点执行该特性。

ele1.isSameNode(ele2)检测2个节点是否引用同一个对象。

ele1.isEqualNode(ele2)检测2个节点是否完全相等。

---

ele.setUserData("键","数据","处理函数")将数据指定给节点。（Chrome貌似不支持）。
处理函数接收5个参数：操作类型数值，数据键，数据值，源节点，目标节点。

iframe.contentDocument属性 指向框架的文档对象。

样式(CSS)

检测：var suport=document.implementtation.hasFeature("CSS","2.0")

1、style样式
ele.style.fontFamily访问、设置具体的CSS属性（内联样式）使用驼峰式的属性。
ele.style.cssText 访问style中的代码。
ele.style.getPropertyValue("name") 返回给定属性的字符串值。
ele.style.removeProperty("name")删除给定属性。
ele.style.setProperty("name"，"value","important") 设置给定属性的值，可以加上优先权标志，不需要则空字符串。
ele.style.getPropertyCSSValue 返回 cssText和cssValueType。（Chrome似乎无效）。

2、计算后的样式（实际效果）
document.defaultView.getComputedStyle(div,:after)取得计算后的样式。第二个参数可省略。
IE用div.currentStyle。

####操作样式表（Chrome不支持）

var sheet = document.styleSheets      //取得样式表集合（<link>/<style>的样式表）
var rules = sheet[0].cssRules         //取得第一个样式表内的规则集合，IE用rules
var rule = rules[0]                   //取得第一条规则
sheet[0].insertRules("规则文本"，索引) //添加规则，IE用addRule()
sheet[0]=deletRules(索引)             //删除规则

####元素大小
偏移量
ele.offsetWidth元素包括边框在内的宽度(像素)
ele.offsetHeight元素包括边框在内的高度(像素)
ele.offsetTop元素的上外边框到包含他的元素的上内边框的像素距离
ele.offsetLeft元素的左外边框到包含他的元素的左内边框的像素距离

客户区大小 [不包含边框。(内容+内边距的大小)] 只读
ele.clientWidth客户区的宽
ele.clientHeight客户区的高

document.documentElement.clientWidth 		\\取得浏览器视口宽度
document.documentElement.clientHeight		\\取得浏览器视口高度

滚动大小
scrollHeight 元素原本的高度
scrollWidth 元素原本的宽度
scrollLeft 隐藏在内容区域左侧的像素数
scrollTop 隐藏在内容区域上方的像素数
可以对父元素设置scrollLeft/scrollTop设置初始滚动位置

确定元素大小
使用ele.getBoundingClientRect ,返回一个矩形对象

遍历

使用document.createNodeIterator()和document.createTreeWalker()。

document.createNodeIterator(document,NodeFilter.SHOW_ELEMENT,null,false)
//参数为: 起点元素, 节点类型, 过滤对象, 是否要扩展实体引用(false)

范围

document.createRange()创建一个范围对象