DOM基础知识总结
DOM接口结构
DOM操作API
1. 节点查询
1) DOM规范API
querySelectorAll/querySelector ，这两个API返回的是NodeList类型的快照，不会随DOM的修改而变化
2) BOM对象API
document: getElementById/getElementsByName/getElementsByTagName/getElementsByClassName；
element: children;
2. 节点更新
1) DOM规范API
Core(Node): cloneNode/importNode/appendChild/insertBefore/removeChild/replaceChild；
2) BOM对象API
document: createElement/createDocumentFragment
DOM属性
1. dom对象属性（property）
- 直接通过dom对象操作
- 取值可以为对象和字符
- 区分大小写
2. html标签属性（attribute）
- 可通过setAttribute/getAttribute操作
- 取值是字符
- 不区分大小写
3. property和attribute关系
1) <IE8, IE8(Q)环境，两者区分不清晰
参考：http://w3help.org/zh-cn/causes/SD9006
2) attribute转为property的规则
- 默认转换为小写；
- 多个单词，第一个单词外的单词首字母大写；
- 与关键字重复，则加html前缀；
- class对应className；
- data-*对应为dataset[*]；
3) 数据同步
- 非标准属性，互不同步；
- 标准属性，修改attribute会同步到property，反之不可以；
- 修改了input.value/input.checked后，两者互不同步；
DOM空间范围
1. 窗口滚动条位置
1) window.[pageXOffset/pageYOffset]
2) [document.documentElement/document.body].[scrollLeft/scrollTop]
2. 窗口高宽
1) window.[innerWidth/innerHeight]
2) [document.documentElement/document.body].[clientWidth/clientHeight]
3. 元素位置和高宽
1) offset[Width/Height/Left/Top/Parent]
- width/height从从元素边框外侧计算可视区域；
- left/top为元素边框外侧相对根节点边框内侧的位置；
2) client[Width/Height/Left/Top]
- width/height从元素边框内侧计算可视区域；
- left/top为边框内侧相对边框外侧的位置；
- 内联元素的4个值都为0；
3) scroll[Width/Height/Left/Top]
- width/height从元素边框内侧计算完整内容区域；
- left/top为滚动条位置；
4. 元素相对窗口位置
el.getBoundingClientRect().[left/right/top/bottom/width/heigh];
IE浏览器不支持width/height属性。
5. 行内元素文本框
var arr = el.getClientRects();
arr[0].[left/right/top/bottom/width/heigh];
el为行内元素dom对象，返回的arr中的元素为TextRectangle对象，对应每行的文本框区域；
IE浏览器不支持width/height属性；
6. 选中文字
1) W3C写法
el.focus();
el.setSelectionRange(start, end);
2) IE写法
var range = el.createTextRange();
range.collapse(true);
range.moveEnd('character', end);
range.moveStart('character', start);
range.select();
DOM事件
1. 事件类型
keydown、keyup、keypress
1) keypress在keydown和keyup之间，只有按键会产生字符时才会触发；
2) 事件对象里的keyCode/which代表按键值；
document ready事件
1) 现代浏览器可以直接绑定DOMContentLoaded事件
2) IE8及以下浏览器，通过轮询document.documentElement.doScroll是否可用，来变通实现
DOM Event规范
1) DOM Event 2规范，focus/blur/scroll/mousemove/mouseout不支持冒泡，新规范通过引入新事件来替换解决
2) DOM Event 2规范引入focusin/focusout/mouseenter/mouseleave/wheel/textinput事件(参数为data，并且在粘贴等方式也会触发)
冒泡参数
1) e.target表示触发事件的节点，e.currentTarget表示当前事件函数绑定到的节点
2. 事件注册
1) 设置dom对象事件属性
- 属性名称需要on前缀
- 事件对象通过参数传入
- 事件函数的this为dom元素
- 返回false来阻止事件执行
2) 设置html事件属性
- 属性名称需要on前缀
- 事件对象为event变量
- 事件的作用域链“dom元素 -> form -> document”
- 返回false来阻止事件执行
3) addEventListener
- 事件名称不需要on
- 事件对象通过参数传入
- 冒泡模式(参数为false)/支持捕获(参数为true)
- 同一个函数只会注册一次
- 事件函数的this为dom元素
- 返回false或调用preventDefault方法来阻止事件执行
- 注册的事件按注册顺序来执行
4) attachEvent
- 事件名称需要on前缀
- 事件对象通过window.event获取
- 不支持捕获模式
- 同一个函数可多次注册
- 事件函数的this为window对象
- 设置returnValue来阻止事件执行
- 注册的事件按随机顺序来执行
3. 事件自定义
1) IE浏览器写法（兼容IE10及以下版本）
el.attachEvent('[eventTypeName]', function(event) {});
var event = document.createEventObject();
el.fireEvent('[eventTypeName]', event);
2) W3C规范写法
el.addEventListener('[eventTypeName]', function (event) {}, false);
var event = document.createEvent('[eventName]');
event.initEvent('[eventTypeName]', true, true);
el.dispatchEvent(event);
