技术头条 - 一个快速在微博传播文章的方式     搜索本站
您现在的位置首页 --> JavaScript --> DOM操作琐碎知识点

DOM操作琐碎知识点

浏览:2021次  出处信息

    1. parentWindow 与 defaultView

    parentWinow是IE下document的特有属性,表示的是document所在的window对象

    defaultView DOM Level2中引入的属性,document.defaultView指向默认的AbstractView。

    2. 各种坐标以及维度属性

    

    365152B7C20550F25A0575CEF593D6A4

     

    

    元素可见区域宽/高(不包括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标准内容

建议继续学习:

  1. PHP Simple HTML DOM Parser 是一个不错的html/xml分析类    (阅读:5741)
  2. phpQuery:像jQuery一样处理DOM    (阅读:3270)
  3. 仅100行的JavaScript DOM操作类库    (阅读:3244)
  4. 对大量子节点DOM操作的最佳实践方式    (阅读:3088)
  5. 获取Dom元素的X/Y坐标    (阅读:2791)
  6. DOM元素上jQuery事件几点学习    (阅读:2363)
  7. JS操作iframe里的dom    (阅读:2324)
  8. React入门:关于虚拟DOM(Virtual DOM)    (阅读:2279)
  9. DOM Storage全解析    (阅读:2205)
  10. 页面DOM加载顺序和用户视觉浏览顺序的一致性    (阅读:2196)
QQ技术交流群:445447336,欢迎加入!
扫一扫订阅我的微信号:IT技术博客大学习
  • 作者:Miller    来源: Miller
  • 标签: DOM
  • 发布时间:2010-08-09 09:36:11
© 2009 - 2024 by blogread.cn 微博:@IT技术博客大学习

京ICP备15002552号-1