JS基础知识总结（4）

DOM

• DOM : Document Object Model - 文档对象类型
• 文档：html页面
• 文档对象：页面中的元素
• 文档对象模型：定义为了能够让程序（js）去操作页面中的元素
• DOM会把文档看作成一棵树，同时定义很多方法来操作这棵树中的每个元素（节点）
• DOM节点操作
  1. childNodes
     • 元素.childNodes ： 只读 属性 子节点列表集合
       • 标准下：包含元素节点和文本节点，也会包含非法嵌套的子节点
       • 非标准下：不包含文本节点IE7以下不会包含非法嵌套的子节点
       • childNodes只包含一级子节点，不包含后辈孙级以下的节点
     • DOM节点类型有12种
       • 元素.nodeType : 只读 属性 当前元素节点的属性类型
       • 元素节点：1
       • 文本节点：3
       • 属性节点：2
     • 元素.attributes : 只读 属性  属性列表集合
  2. chlidren
     • 元素.children  : 只读 属性 子节点列表属性集合
     • 标准下：只包含元素类型的节点
     • 非标准下：只包含元素类型的节点
  3. 元素.firstChild || 元素.firstElementChild
     • 元素. firstChild    只读 属性 第一个子节点
     • 标准下：firstChild 会包含文本类型的节点
     • 非标准下：只包含元素节点
  4. 元素.lastChild || 元素.lastChild
  5. 元素.nextSibling || 元素.nextElementSibling
  6. 元素.previousSibling || 元素.previousElementSibling
  7. 元素.parentNode ： 只读   属性  当前节点的父级节点
  8. offsetParent ： 属性 只读 离当前元素最近的一个有定位的父节点
     • 如果没有定位父级： body
     • IE7 以下，如果当前元素没有定位默认为body，如果有定位，则为html
     • IE7 以下，如果当前元素的某个父级触发了layuot，那么offersetParent就会只想触发了这个layout的父级元素
  9. offsetLeft[top] :只读 属性 当前元素到定位父级的距离（偏移值）到当前元素offsetParent的距离。
     • 如果没有定位父级：
       • 标准：offsetParent ==> body; offsetLeft ==> html
     • 如果有定位父级
       • IE7 : 如果自己没有定位，那么offsetLeft[TOP]是到body的距离；如果自己有定位，那么就是到定位父级的距离
       • 标准：到定位父级的距离
  10. style.width            content ：样式宽
  11. clientWidth       ：  样式宽+padding     可视区域的宽
  12. offsetWidth   ： 占位宽  样式宽 + padding + border