DOM操作琐碎知识点
1. parentWindow 与 defaultView
parentWinow是IE下document的特有属性,表示的是document所在的window对象
defaultView DOM Level2中引入的属性,document.defaultView指向默认的AbstractView。
2. 各种坐标以及维度属性
元素可见区域宽/高(不包括border): clientWidth/clientHeight
元素可见区域宽/高(包括border): offsetWidth/offsetHeight
元素整体宽/高(包括因滚动而隐藏的部分): scrollWidth/scrollHeight
元素被隐藏内容的尺寸: scrollTop(超出顶部的内容高度)/scrollLeft(超出左边的内容宽度)
页面可视区顶部离屏幕顶部/左边的距离: window.screenTop/screenLeft(IE下有效、Firefox下无该属性、Chrome下的值比较令人费解)
屏幕分辨率的高: window.screen.height;
屏幕分辨率的宽: window.screen.width;
屏幕可用工作区高度/宽度: window.screen.availHeight/availWidth(即分辨率减去任务栏等非工作区的高度或宽度,在IE、Firefox、Chrome下均有效)
offsetLeft:获取对象相对于页面(body)或由其offsetParent属性所指定的父元素左侧的位置
offsetTop:获取对象相对于页面(body)或由offsetParent属性所指定的父元素顶端的位置event.clientX 相对文档的水平座标
event.clientY 相对文档的垂直座标
event.offsetX 相对容器的水平坐标
event.offsetY 相对容器的垂直坐标
clientWidth = width + padding
clientHeight = height + padding
offsetHeight = border + height+ padding
offsetWidth = border + width + padding
(需要提一下:CSS中的margin属性,与clientWidth、offsetWidth、clientHeight、offsetHeight均无关)
3. document.body 与 document.documentElement
CSS1compat(Standard)模式下使用document.documentElement
BackCompat(Quirks)下使用document.body,可以这样判断:
var height = document.compatMode=="CSS1Compat" ? document.documentElement.clientHeight : document.body.clientHeight;
测试的结果:
CSS1Compat(Standard)模式下(包含DOCTYPE),
如果要取document的clientWidth则使用document.documentElement.clientWidth
BackCompat(Quirks)模式下(无DOCTYPE),
如果要取document的clientWidth则使用document.body.clientWidth
注意:对于opera,无论哪个模式下都用body.clientWidth取
4. pageXOffset 与 scrollLeft
计算页面已经滚动的距离(隐藏部分),在IE下使用document.documentElement.scrollLeft或者document.body.scrollLeft,在其他浏览器下使用pageXOffset。
pageYOffset与scrollTop相对
非DOM标准内容
5. 判断当前页面的模式(使用document.compatMode)
如果为CSS1Compat则为Standard Mode
如果为BackCompat则为Quirks Mode
6. window.innerWidth 与 window.innerHeight
相当于clientWidth和clientHeight加上滚动条的宽度(如果有滚动条的话),IE下无该属性
非DOM标准内容
7. window.outerWidth 与 window.outerHeight
整个浏览器的宽度和高度,包括工具栏、菜单栏等,IE下无该属性
非DOM标准内容
建议继续学习:
- PHP Simple HTML DOM Parser 是一个不错的html/xml分析类 (阅读:5769)
- 仅100行的JavaScript DOM操作类库 (阅读:3364)
- phpQuery:像jQuery一样处理DOM (阅读:3315)
- 对大量子节点DOM操作的最佳实践方式 (阅读:3129)
- 获取Dom元素的X/Y坐标 (阅读:2840)
- React入门:关于虚拟DOM(Virtual DOM) (阅读:2543)
- DOM元素上jQuery事件几点学习 (阅读:2415)
- JS操作iframe里的dom (阅读:2336)
- DOM Storage全解析 (阅读:2260)
- 页面DOM加载顺序和用户视觉浏览顺序的一致性 (阅读:2230)
扫一扫订阅我的微信号:IT技术博客大学习
- 作者:Miller 来源: Miller
- 标签: DOM
- 发布时间:2010-08-09 09:36:11
- [69] 如何拿下简短的域名
- [67] Go Reflect 性能
- [63] Oracle MTS模式下 进程地址与会话信
- [60] 【社会化设计】自我(self)部分――欢迎区
- [60] IOS安全–浅谈关于IOS加固的几种方法
- [59] 图书馆的世界纪录
- [57] android 开发入门
- [55] 视觉调整-设计师 vs. 逻辑
- [48] 界面设计速成
- [47] 读书笔记-壹百度:百度十年千倍的29条法则