DOM基础知识总结
2014-10-22 00:30
309 查看
DOM接口结构
![](http://p.qlogo.cn/qqmail_head/PiajxSqBRaEItzA6UoGK2Ls7zaUFbkXKS2fjibR9KDuoU6ibL9cPWGCxicycFAxNlICBuViaRPZsLynQ/0)
DOM操作API
1. 节点查询
1) DOM规范API
![](http://p.qlogo.cn/qqmail_head/ajNVdqHZLLCXpLOgwLp7ZUjvgOcicH3OibTlYnKk3P4j6ZMfPQIfoy1SAdhQ1fBC0UdQ4uJic72mzghVRzaniaqSW1TczHwaQrTr/0)
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. 事件类型
![](http://p.qlogo.cn/qqmail_head/ajNVdqHZLLCXpLOgwLp7ZUjvgOcicH3OibTlYnKk3P4j6ZMfPQIfoy1f8hNRkQljOEqNAveDBWPf876NOAicRZNWkWn0M6d1stb/0)
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);
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);
相关文章推荐
- JS之DOM基础知识总结
- jQuery基础知识点总结(DOM操作)
- JavaScript DOM基础知识总结(二)
- php-DOM部分基础知识总结与实例(V客学院知识分享)
- Javascript基础知识(三)BOM,DOM总结
- js学习总结之dom2级事件基础知识详解
- javascript中DOM部分基础知识总结
- Javascript基础知识(三)BOM,DOM总结
- ExtJs基础知识总结:Dom、IFrame和TreePanel、TabPanel(三)
- JavaScript基础知识总结
- JAVA基础知识总结
- Jsp基础知识总结.
- MFC基础知识总结
- MFC基础知识总结(转)
- Java基础知识精华总结
- JAVA基础知识精华总结
- JAVA 基础知识总结
- JAVA基础知识精华总结
- MFC基础知识总结
- JAVA基础知识精华总结