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);